jQuery DOM Attributes and Properties

HTML attributes and DOM properties are related but distinct concepts. Attributes are what you see in the HTML source; properties are the live JavaScript values that the browser derives from them and updates as the user interacts with the page. jQuery provides .attr() for attributes and .prop() for properties.

When to Use .attr()

Use .attr() when you need the original HTML attribute value — for example, the href as written in the source, the id, or a custom data-* attribute. It reflects the markup, not the current state.

When to Use .prop()

Use .prop() for boolean attributes such as checked, disabled, and selected, where you care about the current live state. .attr('checked') tells you whether the attribute was present at parse time; .prop('checked') tells you whether the checkbox is checked right now.

.attr('href') — original attribute string
.prop('checked') — live boolean state
.removeAttr('disabled') — remove an attribute entirely
.data('key') — read a data-* attribute (with caching)

jQuery's .data() method reads data-* attributes on first access, then stores any subsequent writes in internal jQuery cache — it does not write back to the DOM attribute.

Example

// Attribute vs property
var originalHref = $('a#logo').attr('href');      // "/home"
var isChecked    = $('#agree').prop('checked');    // true/false

// Set an attribute
$('img').attr('src', '/images/new-photo.jpg');

// Enable / disable a button
$('#submit').prop('disabled', true);
$('#submit').prop('disabled', false);

// Remove an attribute
$('input').removeAttr('readonly');

// Read a data-* attribute
var userId = $('#profile').data('user-id');
console.log('User ID:', userId);

JAVASCRIPT

Full Editor

Pro Tip

Always use .prop() for checked, disabled, and selected states — .attr() reflects the initial HTML, not the current state.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned