.css() JQ Home  <<  A & P  <<  .css()

First element CSS property retrieval and matched set CSS property setting.

Description

The .css() method is used to retrieve the value of a CSS property from the first element within the matched set, or set one or more CSS properties within the matched set.

  • Because the .css() method is called directly on a jQuery object, it has the advantage of accounting for different attribute naming across browsers.
  • You cannot use the .css() method on shorthand CSS properties such as background, border etc.
  • Under the covers the .css() method modifies the element's style attribute.
  • When setting a CSS property:
    • The .css() method accepts relative strings starting with += or -= to increment or decrement the current value.
    • Setting the value of a style property to an empty string:
      If the property has already been directly applied through the .css() method, via the HTML style attribute or through direct DOM manipulation of the style property, that property is removed from the element.
      If the property has been applied with a CSS rule, via a stylesheet or using the <style> </style> HTML element, that property is NOT removed from the element.

Syntax

Signature Description
.css( propertyName ) Retrieve the value of a CSS property from the first element within the matched set.
.css( propertyNames ) Retrieve the values of the array of CSS properties from the first element within the matched set.
.css( propertyName, value ) Set a single CSS property value within the matched set.
.css( properties )Use an object of key-value pairs to set multiple CSS properties within the matched set.
.css( propertyName, function(index, value) )A function returning the CSS property value to set.

Parameters

Parameter Description Type
propertyNameThe CSS property name.String
propertyNamesAn array of CSS property names to get values for.Array
valueA value to set the property to.String or
Number
propertiesA plain JavaScript object of key-value pairs to set.PlainObject
function(index, value)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing property values pertaining to the current element are also passed.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
Function

Return

Retrieving - A String object.

Setting - A jQuery object including the updated properties within the matched set.

.css( propertyName ) Example A & P  <<  Top

Retrieve the value of a CSS property from the first element within the matched set.

In the example below when we get the value of the class attribute for the table below that has an id of 'table1'.

Table For Testing The .css( propertyName ) Signature
Table Row 1, Table Data 1  Class of turnOrange Table Row 1, Table Data 2  ID of id1
Table Row 2, Table Data 1  Class of turnOlive Table Row 2, Table Data 2  ID of id1


$(function(){
  $('#btn17').on('click', function() {
    alert('The background colour property of the first table cell is: ' 
           + $('#table1 td').css('backgroundColor') + '.'); 
  });
});

Press the button below to action the above code:

.css( propertyNames ) Example

Retrieve the values of the array of CSS properties from the first element within the matched set.

In the example below when we get the values of the class attribute for the table below that has an id of 'table2'.

Table For Testing The .css( propertyNames ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2


$(function(){
  $('#btn17b').on('click', function() {
    var propArray = $('#table2 td').css(['backgroundColor','height','width']); 
    alert('Some CSS properties of the first table cell are: ' + JSON.stringify(propArray)); 
  });
});

Press the button below to action the above code:

.css( propertyName, value ) Example A & P  <<  Top

Set a single CSS property value within the matched set.

In the example below when we press the buttons we use relative strings to increment or decrement the table cell width.

Table For Testing The .css( propertyName, value ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2


$(function(){
  $('#btn18').on('click', function() {
    $('.testtable3 td').css('width', '+=20');
  });
  $('#btn19').on('click', function() {
    $('.testtable3 td').css('width', '-=20');
  });
});

Press the button below to action the above code:

                

.css( properties ) Example A & P  <<  Top

Use A plain JavaScript object of key-value pairs to set multiple CSS properties within the matched set.

We can set multiple property values using an object of key-value pairs which we create in object literal format, commonly known as JSON. Take a look at: JavaScript Intermediate - Lesson 7: Object Literals for more information on object literals and JSON.

In the example below when we press the button, we modify the 'width' and 'height' and 'background-color' properties of the image. The original HTML for the image is shown below:


<img src="../../../images/thaigreencurrysmall.webp"
 alt="a picture of curry" style="width:200px;height:150px;padding:20px;background-color:orange;" />

a picture of curry



$(function(){
  $('#btn20').on('click', function() {
    $('#curry').css({
      backgroundColor: 'yellow',
      width: '300',
      height: '200'
    });
  });
});

Press the button below to action the above code:

.css( propertyName, function(index, value) ) Example A & P  <<  Top

A function returning the property value to set.

In the example below when we press the button we change the background colour of each image to olive.

a picture of curry a picture of curry a picture of curry


$(function(){
  $('#btn21').on('click', function() {
    $('.curry').css('backgroundColor', function(index, value) {
      return 'olive';
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 10 - Working With General CSS Properties