css() in jQuery

css() in jQuery

This method is used to get the value of a computed style property of the first element in the set of matched elements.

The CSS and DOM formatting of multiple-word properties can be equally interpret in jQuery . eg) "font-size" and "fontSize" are same meaning.

jQuery will convert the number which is passed, to a string and add px to the end of that string.

css() setter automatically take cares of prefixing the property name.

For example, .css( "user-select", "none" ) in Chrome/Safari will use -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.

Relative value is a string starting with += or -=, which is used to increment or decrement the value.

For example, if an element's padding-left is 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

Syntax 1 - Get the computed style properties for the first element in the set of matched elements

$(selector).css(propertyName)

  • propertyName - A CSS property name.
Syntax 2

$(selector).css(propertyName,value)

  • propertyName - A CSS property name.
  • value - A CSS property value.
Syntax 3

$(selector).css(properties)

  • properties - Set of CSS property names and values.
Syntax 4

$(selector).css(propertyName,function(index,currentValue))

  • propertyName - A CSS property name.
  • index - Index position of the element in the set.
  • currentValue - Old CSS property value.

Example 1 - Get css property value

Try Yourself

Example 2 - Get css property color value (always return in RGB color format)

Try Yourself

Example 3 - Get not assigned css property value

Try Yourself

Example 4 - Get multiple css property values

Try Yourself

Example 5 - set css property value

Try Yourself

Example 6 - set multiple css properties values

Try Yourself

Example 7 - get old and set new css property value

Try Yourself

Example 8 - Hidden tricks

Try Yourself