jQuery .attr() Method

What You’ll Learn

The .attr() method gets or sets HTML attributes on matched elements. This tutorial covers all four API overloads (getter, name/value setter, plain object, callback setter), the critical difference between attributes and properties, comparisons with .prop(), .removeAttr(), and .data(), and five official jQuery demos.

Introduction

HTML elements carry attributes in markup — href on links, src and alt on images, title for tooltips, and id for unique identifiers. When JavaScript needs to read or change those values at runtime, jQuery provides .attr().

Available since jQuery 1.0, .attr() offers two main benefits over raw DOM calls: convenience (chain it on a jQuery object) and cross-browser consistency (jQuery normalizes inconsistent attribute reporting across browsers). Attribute values are almost always strings — with a few exceptions like value and tabindex.

Since jQuery 1.6, use .prop() for live DOM properties such as checked, selected, and disabled on form elements — not .attr(). The attribute and property of boolean elements behave differently; Example 2 demonstrates this.

Understanding the .attr() Method

Given a jQuery object representing one or more DOM elements, .attr() either reads an attribute from the first element (getter) or writes attributes to every matched element (setter). Getters return a string or undefined if the attribute is not set. Setters return the original jQuery object for chaining.

Think of attributes as the initial HTML declaration — what you wrote in markup. Properties are the live DOM state that can change as the user interacts. For a checkbox, attr('checked') reflects the initial HTML state and does not update when the user clicks; prop('checked') tracks the current checked state.

📝 Syntax

jQuery .attr() accepts four argument forms:

1. Getter — read one attribute (since 1.0)

.attr( attributeName )

• attributeName — the name of the attribute to get.
• Returns a string or undefined for the first matched element only.

2. Setter — name and value (since 1.0)

.attr( attributeName, value )

• attributeName — the attribute to set on every matched element.
• value — string, number, boolean, or null. Passing null removes the attribute (same as .removeAttr()).

3. Plain object — set multiple attributes (since 1.0)

.attr( attributes )

• attributes — a plain object of attribute-value pairs applied to each matched element.

4. Callback setter — computed value per element (since 1.1)

.attr( attributeName, function( index, attr ) {
  // return value to set
} )

• index — zero-based position of the element in the matched set.
• attr — the element’s current attribute value (or undefined).
• this — the current DOM element. Return a string or number to set; return nothing to leave unchanged.

Return value

• Getter — String or undefined (first element only).
• Setter — the original jQuery object (for chaining).

Attributes vs. properties

Use .attr() for HTML attributes in markup. Use .prop() for dynamic form state:

// Attributes — initial HTML values (strings)
$("a").attr("href", "/about");

// Properties — live DOM state on form controls
if ( $("input").prop("checked") ) { /* user checked it */ }
if ( $("option").prop("selected") ) { /* currently selected */ }
$("input").prop("disabled", true);

WARNING: always quote 'class'

class is a reserved word in JavaScript. Always use quotes:

// Correct
$("div").attr("class", "highlight");

// Syntax error — class is reserved
// $("div").attr(class, "highlight");

Official jQuery API example

var title = $( "em" ).attr( "title" );
$( "div" ).text( title );

Examples Gallery

Examples 1–5 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

var title = $( "em" ).attr( "title" );
$( "div" ).text( "The title of the emphasis is: " + title );

The title of the emphasis is: The title of the emphasis

Getter reads first <em> only — returns a string

$( "input" ).on( "change", function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr('checked'): " + $input.attr( "checked" ) + " <br>" +
    ".prop('checked'): " + $input.prop( "checked" ) + " <br>" +
    ".is(':checked'): " + $input.is( ":checked" )
  );
} ).trigger( "change" );

Unchecked: .attr('checked') → undefined, .prop('checked') → false
Checked:   .attr('checked') → undefined, .prop('checked') → true

.attr() reflects initial HTML — .prop() tracks live state

$( "img" ).attr({
  src: "hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );

Image loads with src, title, and alt set

Displayed text: jQuery Logo (from .attr("alt"))

$( "div" )
  .attr( "id", function( index ) {
    return "div-id" + index;
  })
  .each(function() {
    $( "span", this ).text( "(id = '" + this.id + "')" );
  });

div 0 → id="div-id0"
div 1 → id="div-id1"
div 2 → id="div-id2"

$( "img" ).attr( "src", function() {
  return this.title;
});

title attribute holds the image path

.attr('src', fn) copies title → src and image loads

🚀 Common Use Cases

• Broken image fallback — $("img").on("error", function(){ $(this).attr("src", "placeholder.png"); }).
• Dynamic links — $("a.download").attr("href", fileUrl) to update download targets.
• Accessibility — $("img").attr("alt", description) when content loads asynchronously.
• Lazy loading hints — $("img[data-src]").attr("src", function(){ return $(this).data("src"); }).
• Unique IDs for testing — $(".row").attr("id", function(i){ return "row-"+i; }).
• Remove stale attributes — $("div").attr("title", null) to clear tooltips.

📝 Notes

• Available since jQuery 1.0 — callback setter since 1.1.
• Getter returns value for the first element only; setters apply to all matches.
• Since jQuery 1.6, unset attributes return undefined (not empty string).
• Use .prop() for checked, selected, and disabled — not .attr().
• Pass null to remove an attribute; since 4.0, false also removes non-ARIA attributes.
• Always quote 'class' — it is a JavaScript reserved word.
• Changing type on inputs created via document.createElement() throws in IE8 and older.

💡 Best Practices