jQuery attr() and prop() Methods

The attr() and prop() methods both work with HTML element attributes — but they work at different levels. Understanding when to use each one prevents bugs and ensures your code behaves correctly.

What is attr()?

The attr() method works with HTML attributes — the values you write in the HTML source code. It reads and changes what is in the HTML markup itself.

attr() Syntax

$(selector).attr("attribute")              // getter
$(selector).attr("attribute", "value")     // setter
$(selector).attr({ attr1: val1, attr2: val2 }) // set multiple

What is prop()?

The prop() method works with DOM properties — the current live state of the element in the browser. Properties can change as the user interacts with the page, even if the HTML attribute does not change.

prop() Syntax

$(selector).prop("property")              // getter
$(selector).prop("property", value)       // setter

Diagram: Attribute vs Property

  HTML source code:
  <input type="checkbox" id="agree" checked>

  attr("checked") → "checked"  (the HTML attribute — does not change)
  prop("checked") → true       (the live DOM state — changes when user clicks)

  User unchecks the checkbox:
  attr("checked") → "checked"  (still "checked" — HTML source unchanged)
  prop("checked") → false      (now false — live state updated)

Reading and Setting href with attr()

HTML:
<a id="siteLink" href="https://example.com">Visit Site</a>

jQuery:
// Get the href
var url = $("#siteLink").attr("href");
// url = "https://example.com"

// Set a new href
$("#siteLink").attr("href", "https://newsite.com");

// Get the visible text
var txt = $("#siteLink").text();
// txt = "Visit Site"

Setting Multiple Attributes at Once

$("img#logo").attr({
    "src":   "images/new-logo.png",
    "alt":   "Company Logo",
    "width": "200"
});

Removing an Attribute with removeAttr()

// Disable an input field
$("input").attr("disabled", "disabled");

// Re-enable it
$("input").removeAttr("disabled");

// Better way (use prop for boolean attributes):
$("input").prop("disabled", true);   // disable
$("input").prop("disabled", false);  // enable

prop() for Boolean Attributes

Boolean attributes like checked, disabled, selected, and readonly are best handled with prop(). They have only two states: true or false.

// Check if checkbox is checked
var isChecked = $("#agree").prop("checked");  // true or false

// Check or uncheck programmatically
$("#agree").prop("checked", true);    // checks the checkbox
$("#agree").prop("checked", false);   // unchecks it

// Disable a button
$("#submitBtn").prop("disabled", true);

// Enable a button
$("#submitBtn").prop("disabled", false);

Diagram: Boolean Properties

  prop("checked", true)
  ┌──────────────────────────────────┐
  │ [✓] I agree to the terms         │  ← checkbox is checked
  └──────────────────────────────────┘

  prop("checked", false)
  ┌──────────────────────────────────┐
  │ [ ] I agree to the terms         │  ← checkbox is unchecked
  └──────────────────────────────────┘

Practical: Toggle Form Fields

$(document).ready(function() {
    // Disable all inputs when "Read Only" checkbox is checked
    $("#readOnly").change(function() {
        var disable = $(this).prop("checked");
        $("input, textarea, select").prop("disabled", disable);
    });
});

data-* Attributes with attr()

Custom data-* attributes store extra information in HTML elements. Read them with attr() or the more convenient data() method.

HTML:
<button id="deleteBtn" data-id="42" data-role="admin">Delete</button>

jQuery:
var id   = $("#deleteBtn").attr("data-id");   // "42"
var role = $("#deleteBtn").attr("data-role"); // "admin"

// Or use data() method:
var id2  = $("#deleteBtn").data("id");        // 42 (as number)
var role2 = $("#deleteBtn").data("role");     // "admin"

When to Use attr() and When to Use prop()

Quick Summary

• attr() reads/writes HTML attributes as they appear in the source.
• prop() reads/writes the live DOM property state — it reflects current status.
• Use prop() for boolean states: checked, disabled, selected, readonly.
• Use attr() for non-boolean attributes: href, src, alt, name.
• removeAttr() removes an attribute completely from the element.