Questions And Answers

More Tutorials

Jquery CSS Manipulation

CSS – Getters and Setters

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

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:


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).


In this page (written and validated by ) you learned about Jquery CSS Manipulation . What's Next? If you are interested in completing Jquery tutorial, your next topic will be learning about: Jquery Increment Decrement Numeric Properties.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.