Handler
The handler object is an object to get, set, delete, update and export defined CSS properties. You get this object from the controller object
var h = CSSC(".className"); //get a handler object with all CSS objects are defined as .className
h = CSSC([".className1", ".className2"]); //get a handler object with .className1 and .className2
h = CSSC(/\.className[0-9]/); //get a handler obejct with objects matched to regular expression
h = CSSC(); //get a handler object with all defined CSS objects
Methods
.get()
get is a method to get CSS properties
.get([propertie[, returnAll]])
propertie[optional] - A String with property name. If this value is not given, return this method an object with all properies of the Handler objectreturnAll[optional] - A Boolean. If true, the return value is an Array with all found properties; if false, the return value is the last definition of property in the Handler object (default: false)
Return value - Mixed -> Object, String or Array of Strings, depending on how the parameters were set
Example
CSSC({
body: [{
margin: 10,
padding: 5,
},{
border: "1 solid #ccc",
padding: 7
}]
});
var val = CSSC("body").get("padding");
console.log(val);
/*
7px
*/
val = CSSC("body").get("padding", true);
console.log(JSON.stringify(val, true, 4));
/*
[
"5px",
"7px"
]
*/
val = CSSC("body").get();
console.log(JSON.stringify(val, true, 4));
/*
{
"body": [
{
"margin": "10px",
"padding": "5px"
},
{
"border": "1px solid #ccc",
"padding": "7px"
}
]
}
*/
.set()
set is a method to set CSS properties
.set(toSet[, value])
toSet- A property to set as String, an object to set with key-value pair, a function that returns the values to set, or Array containing an object or function with key-value.value[optional] - use this whentoSeta String. A value to set as String/Integer/Float, a function that returns the values to set, an object to create a new CSS rule or an Array with objects to create new rules.
Return value - Handler object.
Example
CSSC({
body: {
margin: 10,
padding: 5,
}
});
CSSC("body").set("border", "1 solid red");
console.log(CSSC.parse());
/*
body {
margin: 10px;
padding: 5px;
border: 1px solid red;
}
*/
CSSC("body").set({margin: 20, padding: 0});
console.log(CSSC.parse());
/*
body {
margin: 20px;
padding: 0px;
border: 1px solid red;
}
*/
CSSC("body").set(".newClass",{margin: "5 0 0 10", float: "left"});
console.log(CSSC.parse());
/*
body {
margin: 20px;
padding: 0px;
border: 1px solid red;
}
body .newClass {
margin: 5px 0px 0px 10px;
float: left;
}
*/
CSSC("body .newClass").set({border: "1 solid #ccc", "/.class1":{float: "none"}});
console.log(CSSC.parse());
/*
body {
margin: 20px;
padding: 0px;
border: 1px solid red;
}
body .newClass {
margin: 5px 0px 0px 10px;
float: left;
border: 1px solid #ccc;
}
body .newClass.class1 {
float: none;
}
*/
.delete()
delete is a method to delete a CSS property or a CSS rule
.delete([property])
property[optional] - A property name to delete. If this value not given, the method deletes the complete rule(s)
Return value - Handler object.
Example
CSSC({
body: [{
margin: 10,
padding: 5,
},{
border: "1 solid #ccc",
padding: 7
}]
});
var parsed = CSSC.parse();
console.log(parsed);
/*
body {
margin: 10px;
padding: 5px;
}
body {
border: 1px solid #ccc;
padding: 7px;
}
*/
// delete property
CSSC("body").delete("padding");
parsed = CSSC.parse();
console.log(parsed);
/*
body {
margin: 10px;
}
body {
border: 1px solid #ccc;
}
*/
//delete rule
CSSC("body").first().delete();
parsed = CSSC.parse();
console.log(parsed);
/*
body {
border: 1px solid #ccc;
}
*/
.update()
update is a method to update updatable properties or rules
.update()
Return value - Handler object.
Example
CSSC({
'.updatable1': function(){
return {
width: Math.random()*100+100,
height: Math.random()*100+100,
};
},
'.updatable2': {
width: 20,
height: function(){ return Math.random()*10+10; }
}
});
var parsed = CSSC.parse();
console.log(parsed);
/*
.updatable1 {
width: 166.16px;
height: 147.66px;
}
.updatable2 {
width: 20px;
height: 16.13px;
}
*/
CSSC(".updatable1").update();
parsed = CSSC.parse();
console.log(parsed);
/*
.updatable1 {
width: 101.4px;
height: 143.95px;
}
.updatable2 {
width: 20px;
height: 16.13px;
}
*/
CSSC(/\.updatable[12]/).update();
parsed = CSSC.parse();
console.log(parsed);
/*
.updatable1 {
width: 117.66px;
height: 198.24px;
}
.updatable2 {
width: 20px;
height: 10.94px;
}
*/
.export()
export is a method to export defined CSS as String, Object or Array
.export([exportType])
exportType[optional] - String with export type (default: "object")"css"- export as CSS String"min"- export as minified CSS String"obj"- export as JS-Object"arr"- export as array"object"- the same as "obj""objNMD"- export as not multidimensional object"array"- the same as "arr"
Return value - Mixed
Example
CSSC({
body: {
margin: 1
},
p: {
width: 500,
margin: "auto",
"span.first": {
"font-size": 25
},
"@media screen and (max-width: 500px)": {
width: "100%"
}
}
});
var exportObject = CSSC("p").export(); // or CSSC.export("obj") or CSSC.export("object")
console.log(JSON.stringify(exportObject, true, 4));
/*
{
"p": {
"width": "500px",
"margin": "auto",
"span.first": {
"font-size": "25px"
},
"@media screen and (max-width: 500px)": {
"width": "100%"
}
}
}
*/
exportObject = CSSC("p").export("css");
console.log(exportObject);
/*
p {
width: 500px;
margin: auto;
}
*/
.parse()
parse is a method to parse defined CSS. This method is identical to .export(CSSC.typeexport.css) or .export(CSSC.typeexport.min)
.parse([min])
- *
min[optional]* - Boolean, if true return a minified CSS (default: false)
Return value - String with CSS
Example
/*
this method returns the same result as .export("css") or .export("min");
*/
exportObject = CSSC("p").parse(true);
console.log(exportObject);
/*
p{width:500px;margin:auto;}
*/
.pos()
pos is a method to get a Handler object with style element of the given position
.pos(position)
position- Integer, the position of found style elements. If the position is negative, count the position from last.
Return value - Handler object with style element of the given position
Example
CSSC({
p: [{
height: 100
},{
width: 500
},{
color: "green"
}]
});
var handler = CSSC("p");
console.log(handler.e.length);
/*
3
*/
console.log(handler.parse());
/*
p {
height: 100px;
}
p {
width: 500px;
}
p {
color: green;
}
*/
console.log(handler.pos(0).parse());
/*
p {
height: 100px;
}
*/
console.log(handler.pos(1).parse());
/*
p {
width: 500px;
}
*/
console.log(handler.pos(-1).parse());
/*
p {
color: green;
}
*/
.first()
first is a method to get a Handler object with first style element. This method is equivalent to .pos(0)
.first()
Return value - Handler object with first style element
Example
CSSC({
p: [{ height: 100 },{ width: 500 },{ color: 0xff00 }]
});
console.log(CSSC("p").first().parse());
/*
p {
height: 100px;
}
*/
.last()
last is a method to get a Handler object with last style element. This method is equivalent to .pos(-1)
.last()
Return value - Handler object with last style element
Example
CSSC({
p: [{ height: 100 },{ width: 500 },{ color: 0xff00 }]
});
console.log(CSSC("p").last().parse());
/*
p {
color: rgb(0, 255, 0);
}
*/
Properties
.e
e is an Array with CSS Objects
CSSC({
".className": {
border: "1px solid #000"
},
".className1": {
border: "1px dotted 0x0"
},
".className2": {
border: "none"
}
});
CSSC(".className").e
CSSC(/\.className/).e
.selector
selector is a String / RegEx / Array / …
If the handler has 1 CSS object, the selector is generally a String.
console.log(CSSC("#mySelector").selector);
/*
#mySelector
*/
