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

• <<    .toggleClass()
• jQuery.cssHooks     >>

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

Parameters

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

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

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

$(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)); 
  });
});

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

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

.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;" />

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

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

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

Related Tutorials

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

• <<    .toggleClass()
• jQuery.cssHooks     >>