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

First element attribute retrieval and matched set attribute setting.

Description

The .attr() method is 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.

  • Returns undefined for attribute values that haven't been set.
  • Do not use the .attr() method on plain objects, arrays, the document or window.
  • Use the .attr() method to retrieve or set DOM attributes.
  • When changing the dynamic state of a DOM element, the .prop() method should be used to set disabled and checked.
  • When changing the dynamic state of a DOM element, the .val() method should be used for getting and setting value.
  • You cannot change the type attribute for the <input> or <button> HTML tags in versions 6,7 and 8 of Internet Explorer. For this reason jQuery does not allow modification of the type attribute and will throw an Error in all browsers.

Syntax

Signature Description
.attr( attributeName ) Retrieve an attribute value from the first element within the matched set.
.attr( attributeName, value ) Set a single attribute value within the matched set.
.attr( map )Use a map of attribute-value pairs to set multiple attribute values within the matched set.
.attr( attributeName, function(index, attr) )A function returning the attribute value to set.

Parameters

Parameter Description Type
attributeNameThe attribute name.String
valueA value to set the attribute to.String or
Number
attributesA plain JavaScript object of attribute-value pairs to set.PlainObject
function(index, attr)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing attributes 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 attributes within the matched set.

.attr( attributeName ) Example A & P  <<  Top

Retrieve an attribute value from the first element within the matched set.

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

Table For Testing The .attr( attributeName ) 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(){
  $('#btn1').on('click', function() {
    alert('This table element has the following classes: ' 
           + $('#table1').attr('class') + '.'); 
  });
});

Press the button below to action the above code:

.attr( attributeName, value ) Example A & P  <<  Top

Set a single attribute value within the matched set.

In the example below when we press the button we select all 'col' elements within the table with an id of 'testtable2'. We then change the width attribute to '220' so the columns get resized to this width.

Table For Testing The .attr( attributeName, 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(){
  $('#btn2').on('click', function() {
    $('.testtable2 col').attr('width', '220');
  });
});

Press the button below to action the above code:

.attr( attributes ) Example A & P  <<  Top

Use a plain JavaScript object of attribute-value pairs to set multiple attribute values within the matched set.

We can set multiple attributes using a 'map' of attribute-value pairs which we pass to the method 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.

  • The quotes around attribute names are optional when setting multiple attributes, apart from when setting the 'class' attribute. The 'class' attribute must always be surrounded in quotes, as it is a JavaScript reserved word and will be treated as such if not quoted.

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(){
  $('#btn3').on('click', function() {
    $('#curry').attr({
      title: 'Thai Green Curry',
      width: '300',
      height: '200'
    });
  });
});

Press the button below to action the above code:

.attr( attributeName, function(index, attr) ) Example A & P  <<  Top

A function returning the attribute value to set.

In the example below when we press the button we add a 'title' attribute to each image.

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


$(function(){
  $('#btn4').on('click', function() {
    $('.curry').attr('title', function(index, attr) {
      return 'Thai Green Curry: ' + index;
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 9 - Working With CSS Attributes