Working With CSS Attributes JQ Home  <<  JQ Basics  <<  Working With CSS Attributes

In this lesson we learn how we can work with CSS attributes using jQuery as well as investigating a couple of general use jQuery CSS methods.

The jQuery CSS attribute methods allow us to add and remove attribute values as well as setting attribute values.

The .html() method is useful for retrieval or setting of HTML content.

The .val() method is useful within form elements for first element current value retrieval and matched set value setting.

CSS Attribute Methods Description
.attr()Retrieve an attribute value from the first element within the matched set, or set one or more attribute values within the matched set.
.html()Retrieve the HTML contents from the first element within the matched set, or set the HTML content of each element within the matched set.
.removeAttr()Remove one or more attributes from each element within the matched set.
.val()Retrieve the current value from the first element within the matched set, or set the value of each element within the matched set.

The .attr() Method Top

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

We will be using the .attr( map ) signature for our example which uses a map of attribute-value pairs to set multiple attribute values within the matched set.

The second signature .attr( attributeName ) will retrieve an attribute value from the first element within the matched set.

The third signature .attr( attributeName, value ) will set a single attribute value within the matched set.

The fourth signature .attr( attributeName, function(index, attr) ) will execute a function that returns the attribute 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' attributes and add a 'title' attribute to the set of attributes attached to the image. The original HTML for the image is shown below:


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


$(function(){
  $('#btn1').on('click', function() {
    $('#curry').attr({
      title: 'Thai Green Curry',
      width: '300',
      height: '200'
    });
});

Press the button below to action the above code:

The .html() Method Top

Used to retrieve the HTML contents from the first element within the matched set, or set the HTML content of each element within the matched set.

We will be using the .html( function(index, oldhtml) ) signature for our example which executes a function and returns the HTML contents to set.

The second signature .html() will retrieve the HTML contents from the first element within the matched set.

The third signature .html( htmlString ) will set the HTML contents of each element within the matched set.

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

In the example below when we press the button the first time we add a new 'td' element to each table row.

Table For Testing The .html( function(index, oldhtml) ) Signature
?
? 


$(function(){
  $('#btn2').one('click', function() {
    $('.testtable tr').html( function(index, oldhtml) {
      var newhtml = oldhtml + '<td>' + index + '</td>';
      return newhtml;
    });
  });
});

Press the button below to action the above code:

The .removeAttr() Method Top

Remove one or more attributes from each element within the matched set.

This method only has one signature .removeAttr( attributeName ).

In the example below when we remove the class and id attributes from each 'td' element, thus removing the background colour styling.

Table For Testing The .removeAttr( attributeName ) 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 id2
Table Row 3, Table Data 1 Table Row 3, Table Data 2 


$(function(){
  $('#btn3').on('click', function() {
    $('#table2 td').removeAttr('class id');
  });
});

Press the button below to action the above code:

The .val() Method Top

Retrieve the current value from the first element within the matched set, or set the value of each element within the matched set.

We will be using the .val() signature for our example which will retrieve the current value from the first element within the matched set.

The second signature .val( value ) will set the value of each element within the matched set.

The third signature .val( function(index, value) ) executes a function returning the value to set.

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

In the example below we get the values of the selected 'radio' and 'select' elements and alert them.

Pie Survey

Which pie do you prefer?:

Select a pie shape: 


$(function(){
  $('#btn4').on('click', function() {
    alert('You like a ' +  $('.ourform select option:selected').val() 
                        + ' shaped ' + $('input:radio[name=pie]:checked').val() + ' pie.');
  });
});

Press the button below to action the above code:

Lesson 9 Complete

In this lesson we learnt how we can work with CSS attributes using jQuery as well as investigating a couple of general use jQuery CSS methods.

Related Tutorials

jQuery Basics - Lesson 8: Working With CSS Classes
jQuery Basics - Lesson 10: Working With General CSS Properties
jQuery Basics - Lesson 11: Working With Dimension & Position CSS Properties

Reference

Methods

Attributes & Properties - .attr() method
Attributes and Properties - .html() method
Attributes & Properties - .removeAttr() method
Attributes & Properties - .val() method
Events - .on() method
Events - .one() method
jQuery Selectors - :checked selector
jQuery Selectors - :radio selector
jQuery Selectors - :selected() selector