Working With General CSS PropertiesS2C Home « Working With General CSS Properties

• <<    CSS Attributes
• Position CSS Properties     >>

There are lots of jQuery methods available for working with CSS properties, in this lesson we look at general property methods.

The jQuery general property methods allow first element CSS property retrieval and matched set CSS property setting as well as property removal. We can also change the dynamic state of a form property that is disabled or checked using the .prop() method.

When CSS3 was being introduced a lot of the browsers used a prefix such as moz- or webkit- for the new CSS3 properties they supported. Using the jQuery.cssHooks allows us to normalize CSS property naming and create custom properties by hooking directly into jQuery.

General Property Methods

These methods allow us to retrieve, set and remove properties.

The .css() Method  Top

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.

We will be using the .css( properties ) signature for our example which uses an object of property-value pairs to set multiple CSS properties within the matched set.

The second signature .css( propertyName ) will retrieve a property value from the first element within the matched set.

The third signature .css( propertyNames ) will retrieve the values of the array of CSS properties from the first element within the matched set.

The fourth signature .css( propertyName, value ) will set a single property value within the matched set.

The fifth signature .css( propertyName, function(index, value) ) will execute a function that returns the property value to set.

Examples of all four signatures are available in the reference section.

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.jpeg"
 alt="a picture of curry" style="width:200;height:150;padding:20px;background-color:orange;">

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

The jQuery.cssHooks Object  Top

The jQuery.cssHooks object is used to override CSS property retrieval and setting, normalize CSS property naming and create custom properties by hooking directly into jQuery.

Examples of a template and test harness are available in the reference section.

The jQuery.escapeSelector() Method  Top

Used to escape characters with special meanings in a CSS selector.

We will be using this methods only signature .escapeSelector( selector ) for our example.

In the example below when we press the button some text is appended to '.div1' .

$(function(){
  $('#btn10').on('click', function() {
    $( "#" + $.escapeSelector( ".div1" ) ).append('We escaped the . Example 1 <br>');
    $( "div" ).find( "#" + $.escapeSelector( ".div1" ) ).append('We escaped the . Example 2 <br>');
  });
});

The .prop() Method  Top

Used to retrieve a property value from the first element within the matched set, or set one or more property values within the matched set.

We will be using the .prop( propertyName, function(index, value) ) signature for our example which will execute a function that returns the property value to set.

The second signature .prop( propertyName ) will retrieve a property value from the first element within the matched set.

The third signature .prop( propertyName, value ) will set a single property value within the matched set.

The fourth signature .prop( map ) uses a map of property-value pairs to set multiple CSS properties within the matched set.

Examples of all four signatures are available in the reference section.

In the example below when we press the button we switch checked boxes to unswitched and vice versa.

$(function(){
  $('#btn2').on('click', function() {
    $("#form1 input[type='checkbox']").prop('checked', function(index, prop) {
      if (prop == true) {
          return false;
      } else {
          return true;
      }
    });
  });
});

The .removeProp( propertyName ) Method  Top

Used to remove a property from within the matched set.

In the example below when we press the left button we add the 'title' attribute with a property of 'Thai Green Curry'. Mouseover the image after pressing the button to see the result.

In the example below when we press the right button we remove the property 'Thai Green Curry' from the 'title' attribute. Mouseover the image after pressing the button to see the result.

<img src="../images/thaigreencurrysmall.jpeg" alt="a picture of curry"  width="200"  height="150">

$(function(){
  $('#btn3').on('click', function() {
    $('#curry2').prop({
       title: 'Thai Green Curry'
    });
  });
  $('#btn4').on('click', function() {
    $('#curry2').removeProp('title');
  });
});

Lesson 10 Complete

In this lesson we learnt how we can work with some general CSS properties using jQuery.

Related Tutorials

jQuery 3.5 Basics - Lesson 8: Working With CSS Classes
jQuery 3.5 Basics - Lesson 9: Working With CSS Attributes
jQuery 3.5 Basics - Lesson 11: Working With Dimension & Position CSS Properties

What's Next?

We finish the basics section with a look at how jQuery allows us to get and set box model dimensions and position the screen.

• <<    CSS Attributes
• Position CSS Properties     >>