jQuery .prop() vs .attr(): Understanding Properties and Attributes

By the end of this page, you will understand the difference between HTML attributes and DOM properties in jQuery, why .attr() and .prop() can return different values, and when each method should be used. You will also see why style, checked, selected, and value often behave differently and how to avoid bugs when upgrading or maintaining older jQuery code.

Attributes and properties are related, but they are not the same thing.

• Attributes are the values written in the HTML markup.
• Properties are the live values on the DOM element object in JavaScript.

For example, in this HTML:

<input type="checkbox" checked>

• The checked attribute says the checkbox starts checked.
• The checked property tells you whether the checkbox is currently checked right now.

That difference matters because the browser turns HTML into DOM objects. Once the page is loaded, JavaScript works mostly with properties, not raw attribute text.

In jQuery:

• .attr() is for reading or writing HTML attributes.
• .prop() is for reading or writing DOM properties.

This is why your style example behaves differently:

this.getAttribute('style');   // string from HTML attribute
$(this).attr();        
$().();        

Think of an HTML element like a house listing and the actual house.

• The attribute is the information written in the listing: "This house has blue walls."
• The property is the real current state of the house when you visit it: maybe the walls are now green.

For style:

• .attr('style') is like reading the original text written on the listing.
• .prop('style') is like walking into the house and inspecting the real paint controls panel.

Another example with a checkbox:

• .attr('checked') asks, "Did the HTML say this started checked?"
• .prop('checked') asks, "Is it checked right now?"

That is the key idea: attributes describe markup, properties describe live state.

Core syntax

$(element).attr(name)
$(element).attr(name, value)

$(element).prop(name)
$(element).prop(name, value)

Example 1: style

<div id="box" style="color: red; background: orange;">Hello</div>

var el = $('#box');

console.log(el.attr('style'));
// "color: red; background: orange;"

console.log(el.prop('style'));
// CSSStyleDeclaration object

Explanation

• .attr('style') returns the raw value of the style attribute as text.
• .prop('style') returns the DOM object.

Consider this example:

<div id="id" style="color: red; background: orange;">test</div>

$('#id').click(function () {
    var getAtt = this.getAttribute('style');
    var thisProp = $(this).prop('style');
    var thisAttr = $(this).attr('style');

    console.log(getAtt);
    console.log(thisProp);
    console.log(thisAttr);
});

What happens step by step

1. The browser parses the HTML

It sees:

style="color: red; background: orange;"

That text is stored as an HTML attribute.

2. The browser creates a DOM element object

When .attr() is useful

Reading markup configuration

<a id="docs" href="/guide">Guide</a>

console.log($('#docs').attr('href'));

Useful when you need values defined in HTML.

Working with custom attributes

<div id="card" data-role="admin"></div>

console.log($('#card').attr('data-role'));

When .prop() is useful

Reading form control state

In real projects, developers usually follow a few practical rules.

1. Use .prop() for boolean UI state

Common examples:

• checked
• selected
• disabled

if ($('#rememberMe').prop('checked')) {
    savePreference();
}

This avoids bugs where code reads the original HTML instead of the current state.

2. Use .attr() for static element metadata

Examples:

• id
• href
• src
• alt
• title
• data-* when not using .data()

 imageUrl = $().();

Mistake 1: Using .attr() for checkbox state

Broken idea:

if ($('#newsletter').attr('checked')) {
    console.log('Checked');
}

Why it is a problem:

• It may reflect the original HTML attribute, not the current user-selected state.

Better:

if ($('#newsletter').prop('checked')) {
    console.log('Checked');
}

Mistake 2: Expecting .prop('style') to return a string

Broken expectation:

var styleText = $('#box').prop('style');
console.log(styleText.toUpperCase());

Why it fails:

• .prop('style') returns a object, not a string.

.attr() vs .prop()

Common examples

Quick rules

• Use .attr() for HTML attributes.
• Use .prop() for DOM properties.
• Use .val() for form values.
• Use .css() for CSS values.

Good defaults

$(el).attr('href')
$(el).attr('data-id')

$(el).prop('checked')
$(el).prop('disabled')
$(el).prop('selected')

$(el).val()
$(el).css('color')

style specifically

$(el).attr('style')   // "color: red; background: orange;"
$(el).prop('style')   // CSSStyleDeclaration object

Boolean properties

Prefer .prop() for:

What is the difference between jQuery .attr() and .prop()?

.attr() works with HTML attributes from markup. .prop() works with live DOM properties on the element object.

Should I use .prop('checked') or .attr('checked')?

Use .prop('checked') for the current checkbox state.

Why does .prop('style') return an object instead of a string?

Because the DOM style property is a CSSStyleDeclaration object, not raw attribute text.

Is .attr('style') the same as getAttribute('style')?

For this use case, yes. Both read the style attribute as text.

Will old .attr() code break in jQuery 1.6?

Not all of it. But code that relied on .attr() for properties like checked, , or should be reviewed.

• DOM properties — .prop() reads and writes these directly.
• HTML attributes — .attr() works with values written in markup.
• jQuery .val() — best for reading and setting form values.
• jQuery .css() — preferred for reading and updating CSS properties.
• Boolean attributes — important because checked, selected, and disabled often confuse beginners.
• Form state in JavaScript — helps explain why live values differ from initial HTML.
• Event handling in jQuery — this concept is often used inside click and change handlers.
• Native DOM getAttribute() vs property access — shows the same distinction without jQuery.