jQuery - CSS Select Methods

The jQuery library supports nearly all of the selectors included in Cascading Style Sheets (CSS) specifications 1 through 3, as listed on the World Wide Web Consortium website.

Using the jQuery library, developers can improve their websites without worrying about browsers and their versions, as long as JavaScript is enabled in the browsers.

Most jQuery CSS methods do not change the content of the jQuery object and are used to apply CSS properties to DOM elements.

Apply CSS Properties

It's very simple to apply any CSS property using the jQuery css (PropertyName, PropertyValue) method .

selector .css( PropertyName, PropertyValue );

Here you can pass the PropertyName as a javascript string and based on its value, the PropertyValue can be a string or an integer.

Apply Multiple CSS Properties

You can apply multiple CSS properties using a single jQuery CSS method ({key1: val1, key2: val2 ....) . You can apply as many properties as you want in one call.

Here is the syntax for the method −

selector .css( {key1:val1, key2:val2....keyN:valN})

Here you can pass the key as a property and val as its value, as described above.

Adjusting the Width and Height of an Element

The width(val) and height(val) methods can be used to set the width and height respectively of any element.

jquery css methods

The following table lists all the methods you can use to play with CSS properties:

Return the style property for the first matched element.

Set a single style property to a value for all matching elements.

Set the key/value object as style properties on all matching elements.

Set the CSS height of each matched element.

Get the current value in pixels, the height of the first matched element.

Gets the inner height (excluding border and including padding) for the first matched element.

Gets the inner width (excluding border and including padding) for the first matched element.

Get the current offset of the first matched element, in pixels, relative to the document.

Returns a jQuery collection with the positioned parent of the first matched element.

Gets the outer height (including borders and padding by default) for the first matched element.

Get the outer width (including default borders and padding) for the first matched element.

Gets the top and left positions of an element, relative to its parent offset.

When a value is passed, the left scroll offset is set to that value for all matching elements.

Gets the left scroll offset of the first matched element.

When a value is passed, the top scroll offset is set to that value for all matching elements.

Gets the top scroll offset of the first matched element.

Set the CSS width of each matched element.

Get the current value in pixels, the width of the first matched element