Using General CSS Properties JQ Home  <<  JQ Basics  <<  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.webp"
 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.webp"
 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 Basics - Lesson 8: Working With CSS Classes
jQuery Basics - Lesson 9: Working With CSS Attributes
jQuery Basics - Lesson 11: Working With Dimension & Position CSS Properties

Reference

Methods

Attributes and Properties - .css() method
Attributes & Properties - .prop() method
Attributes & Properties - jQuery.escapeSelector method
Attributes & Properties - .removeProp() method
Events - .on() method
jQuery Selectors - Attribute Equals [attr="value"] selector

Objects

Attributes & Properties - jQuery.cssHooks object

• <<    CSS Attributes
• Position CSS Properties     >>