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

• <<    Attributes & Properties
• .html()     >>

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

Parameters

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

$(function(){
  $('#btn1').on('click', function() {
    alert('This table element has the following classes: ' 
           + $('#table1').attr('class') + '.'); 
  });
});

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

$(function(){
  $('#btn2').on('click', function() {
    $('.testtable2 col').attr('width', '220');
  });
});

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

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

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

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

Related Tutorials

jQuery Basic Tutorials - Lesson 9 - Working With CSS Attributes

• <<    Attributes & Properties
• .html()     >>