jQuery CSS Manipulation CSS – Getters and Setters
Example
CSS Getter
The .css() getter function can be applied to every DOM element on the page like the following:
// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer,
// refer to `$.width()` method
$("body").css("width");
This line will return the computed width of the specified element, each CSS property you provide in the parentheses will yield the value of the property for this $("selector") DOM element, if you ask for CSS attribute that doesn't exist you will get undefined as a response.
You also can call the CSS getter with an array of attributes:
$("body").css(["animation","width"]);
this will return an object of all the attributes with their values:
Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}
CSS Setter
The .css() setter method can also be applied to every DOM element on the page.
$("selector").css("width", 500);
This statement set the width of the $("selector") to 500px and return the jQuery object so you can chain more methods to the specified selector.
The .css() setter can also be used passing an Object of CSS properties and values like:
$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});
All the changes the setter made are appended to the DOM element style property thus affecting the elements' styles (unless that style property value is already defined as !important somewhere else in styles).
