.prop() vs .attr()

Truthful jQuery 1.6 has the fresh relation prop().

$(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style');})

oregon successful this lawsuit bash they bash the aforesaid happening?

And if I bash person to control to utilizing prop(), each the aged attr() calls volition interruption if i control to 1.6?

Replace

selector = '#id'$(selector).click(function() { //instead of: var getAtt = this.getAttribute('style'); //do i use: var thisProp = $(this).prop('style'); //or: var thisAttr = $(this).attr('style'); console.log(getAtt, thisProp, thisAttr);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><div id='id' style="color: red;background: orange;">test</div>

(seat besides this fiddle: http://jsfiddle.nett/maniator/JpUF2/)

The console logs the getAttribute arsenic a drawstring, and the attr arsenic a drawstring, however the prop arsenic a CSSStyleDeclaration, Wherefore? And however does that impact my coding successful the early?

Replace 1 November 2012

My first reply applies particularly to jQuery 1.6. My proposal stays the aforesaid however jQuery 1.6.1 modified issues somewhat: successful the expression of the predicted heap of breached web sites, the jQuery squad reverted attr() to thing adjacent to (however not precisely the aforesaid arsenic) its aged behaviour for Boolean attributes. John Resig besides blogged astir it. I tin seat the trouble they have been successful however inactive differ with his advice to like attr().

First reply

If you've lone always utilized jQuery and not the DOM straight, this may beryllium a complicated alteration, though it is decidedly an betterment conceptually. Not truthful bully for the bazillions of websites utilizing jQuery that volition interruption arsenic a consequence of this alteration although.

I'll summarize the chief points:

• You normally privation prop() instead than attr().
• Successful the bulk of instances, prop() does what attr() utilized to bash. Changing calls to attr() with prop() successful your codification volition mostly activity.
• Properties are mostly less complicated to woody with than attributes. An property worth whitethorn lone beryllium a drawstring whereas a place tin beryllium of immoderate kind. For illustration, the checked place is a Boolean, the style place is an entity with idiosyncratic properties for all kind, the size place is a figure.
• Wherever some a place and an property with the aforesaid sanction exists, normally updating 1 volition replace the another, however this is not the lawsuit for definite attributes of inputs, specified arsenic value and checked: for these attributes, the place ever represents the actual government piece the property (but successful aged variations of I.e.) corresponds to the default worth/checkedness of the enter (mirrored successful the defaultValue / defaultChecked place).
• This alteration removes any of the bed of magic jQuery caught successful advance of attributes and properties, that means jQuery builders volition person to larn a spot astir the quality betwixt properties and attributes. This is a bully happening.

If you're a jQuery developer and are confused by this entire concern astir properties and attributes, you demand to return a measure backmost and larn a small astir it, since jQuery is nary longer making an attempt truthful difficult to protect you from this material. For the authoritative however slightly adust statement connected the taxable, location's the specs: DOM4, HTML DOM, DOM Flat 2, DOM Flat Three. Mozilla's DOM documentation is legitimate for about contemporary browsers and is simpler to publication than the specs, truthful you whitethorn discovery their DOM mention adjuvant. Location's a conception connected component properties.

Arsenic an illustration of however properties are less complicated to woody with than attributes, see a checkbox that is initially checked. Present are 2 imaginable items of legitimate HTML to bash this:

<input id="cb" type="checkbox" checked><input id="cb" type="checkbox" checked="checked">

Truthful, however bash you discovery retired if the checkbox is checked with jQuery? Expression connected Stack Overflow and you'll generally discovery the pursuing options:

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

This is really the easiest happening successful the planet to bash with the checked Boolean place, which has existed and labored flawlessly successful all great scriptable browser since 1995:

if (document.getElementById("cb").checked) {...}

The place besides makes checking oregon unchecking the checkbox trivial:

document.getElementById("cb").checked = false

Successful jQuery 1.6, this unambiguously turns into

$("#cb").prop("checked", false)

The thought of utilizing the checked property for scripting a checkbox is unhelpful and pointless. The place is what you demand.

• It's not apparent what the accurate manner to cheque oregon uncheck the checkbox is utilizing the checked property
• The property worth displays the default instead than the actual available government (but successful any older variations of I.e., frankincense making issues inactive tougher). The property tells you thing astir the whether or not the checkbox connected the leaf is checked. Seat http://jsfiddle.nett/VktA6/Forty nine/.

I deliberation Tim mentioned it rather fine, however fto's measure backmost:

A DOM component is an entity, a happening successful representation. Similar about objects successful OOP, it has properties. It besides, individually, has a representation of the attributes outlined connected the component (normally coming from the markup that the browser publication to make the component). Any of the component's properties acquire their first values from attributes with the aforesaid oregon akin names (value will get its first worth from the "worth" property; href will get its first worth from the "href" property, however it's not precisely the aforesaid worth; className from the "people" property). Another properties acquire their first values successful another methods: For case, the parentNode place will get its worth primarily based connected what its genitor component is; an component ever has a style place, whether or not it has a "kind" property oregon not.

Fto's see this anchor successful a leaf astatine http://example.com/testing.html:

<a href="foo.html" class="test one" name="fooAnchor" id="fooAnchor">Hi</a>

Any gratuitous ASCII creation (and leaving retired a batch of material):

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+| HTMLAnchorElement |+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+| href: "http://example.com/foo.html" || name: "fooAnchor" || id: "fooAnchor" || className: "test one" || attributes: +−−−−−−−−−−−−−−−−−−−−−−−−−−+ || | href: "foo.html" | || | name: "fooAnchor" | || | id: "fooAnchor" | || | class: "test one" | || +−−−−−−−−−−−−−−−−−−−−−−−−−−+ |+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

Line that the properties and attributes are chiseled.

Present, though they are chiseled, due to the fact that each of this developed instead than being designed from the crushed ahead, a figure of properties compose backmost to the property they derived from if you fit them. However not each bash, and arsenic you tin seat from href supra, the mapping is not ever a consecutive "walk the worth connected", typically location's explanation active.

Once I conversation astir properties being properties of an entity, I'm not talking successful the summary. Present's any non-jQuery codification:

const link = document.getElementById("fooAnchor");console.log(link.href); // Shows "http://example.com/foo.html"console.log(link.getAttribute("href")); // Shows "foo.html"

The link entity is a existent happening, and you tin seat location's a existent discrimination betwixt accessing a place connected it, and accessing an property.

Arsenic Tim mentioned, the huge bulk of the clip, we privation to beryllium running with properties. Partially that's due to the fact that their values (equal their names) lean to beryllium much accordant crossed browsers. We largely lone privation to activity with attributes once location is nary place associated to it (customized attributes), oregon once we cognize that for that peculiar property, the property and the place are not 1:1 (arsenic with href and "href" supra).

The modular properties are laid retired successful the assorted DOM specs:

• DOM2 HTML (mostly out of date, seat the HTML spec alternatively)
• DOM2 Center (out of date)
• DOM3 Center (out of date)
• DOM4

These specs person fantabulous indexes and I urge holding hyperlinks to them useful; I usage them each the clip.

Customized attributes would see, for case, immoderate data-xyz attributes you mightiness option connected parts to supply meta-information to your codification (present that that's legitimate arsenic of HTML5, arsenic agelong arsenic you implement to the data- prefix). (New variations of jQuery springiness you entree to data-xyz parts by way of the data relation, however that relation is not conscionable an accessor for data-xyz attributes [it does some much and little than that]; except you really demand its options, I'd usage the attr relation to work together with data-xyz property.)

The attr relation utilized to person any convoluted logic about getting what they idea you wished, instead than virtually getting the property. It conflated the ideas. Transferring to prop and attr was meant to de-conflate them. Concisely successful v1.6.Zero jQuery went excessively cold successful that respect, however performance was rapidly added backmost to attr to grip the communal conditions wherever group usage attr once technically they ought to usage prop.

Once manipulating the Papers Entity Exemplary (DOM) with jQuery, builders frequently brush 2 strategies that look to execute akin duties: .prop() and .attr(). Knowing the nuanced variations betwixt these strategies is important for penning businesslike and bug-escaped codification. Some strategies let you to entree and modify attributes of HTML components, however they grip antithetic varieties of attributes and properties. Greedy once to usage all volition pb to much predictable and maintainable JavaScript purposes. This article volition delve into the distinctions, supply applicable examples, and usher you connected selecting the correct methodology for assorted eventualities.

Differentiating Betwixt Properties and Attributes successful jQuery

The cardinal to knowing .prop() versus .attr() lies successful the discrimination betwixt HTML attributes and DOM properties. HTML attributes are outlined successful the HTML markup and correspond first values oregon settings. DOM properties, connected the another manus, are properties of the JavaScript objects that correspond the HTML components. These properties tin alteration dynamically arsenic the person interacts with the leaf, oregon arsenic your JavaScript codification modifies them. For illustration, the checked property of a checkbox displays its first government successful the HTML, piece the checked place displays its actual government, which tin beryllium toggled by the person. Utilizing the accurate methodology ensures you are running with the due cooperation of the component’s government.

However .attr() Plant

The .attr() methodology is chiefly utilized to acquire oregon fit HTML attributes. These attributes are portion of the first HTML construction and mostly correspond static values. Once you usage .attr(), you're straight manipulating the property arsenic it exists successful the HTML markup. This is utile for dealing with attributes similar id, people, rubric, oregon customized information attributes (e.g., information-). Nevertheless, .attr() doesn't ever indicate the actual government of an component, particularly for dynamic properties similar checked oregon worth. For case, if you alteration the matter successful an enter tract, .attr('worth') volition inactive instrument the first worth fit successful the HTML, not the actual worth displayed successful the enter tract. So, it's indispensable to usage .attr() for attributes that specify the component's first traits instead than its runtime government. Nevertheless to grade with retired a newline oregon abstraction is a bully illustration of property manipulation.

However .prop() Plant

The .prop() methodology, successful opposition, is designed to acquire oregon fit DOM properties. These properties correspond the actual government of an component and tin alteration dynamically. Utilizing .prop() is peculiarly crucial once dealing with properties similar checked (for checkboxes and energy buttons), chosen (for choices successful a choice container), oregon disabled (for signifier components). Once you usage .prop(), you're interacting straight with the JavaScript entity representing the HTML component, making certain that you're speechmaking oregon mounting the actual government of the component. For illustration, .prop('checked') volition precisely indicate whether or not a checkbox is presently checked, careless of its first government successful the HTML. Utilizing .prop() ensures your codification precisely displays and manipulates the dynamic features of the DOM. It is the correct manner once you demand to cheque the government of an component.

Characteristic	.attr()	.prop()
Intent	Acquire oregon fit HTML attributes	Acquire oregon fit DOM properties
Usage Instances	Static attributes (e.g., id, people, rubric)	Dynamic properties (e.g., checked, chosen, disabled)
Behaviour	Manipulates the property successful the HTML markup	Manipulates the place of the JavaScript entity
Displays Actual Government	Nary, frequently displays first worth	Sure, ever displays actual government

Applicable Examples: Utilizing .prop() and .attr()

To exemplify the variations, fto's expression astatine any applicable examples. Say you person a checkbox successful your HTML: . If you usage $('myCheckbox').attr('checked'), it volition instrument "checked" careless of whether or not the checkbox is presently checked oregon not. Nevertheless, $('myCheckbox').prop('checked') volition instrument actual if the checkbox is presently checked and mendacious if it's unchecked. Likewise, for an enter tract: , $('myInput').attr('worth') volition ever instrument "First Worth", piece $('myInput').prop('worth') volition instrument the actual worth entered by the person. These examples detail the value of selecting the correct methodology based mostly connected whether or not you demand to work together with the first HTML property oregon the actual DOM place.

• Checkbox Government: Usage .prop('checked') to acquire oregon fit the checked government of a checkbox.
• Enter Worth: Usage .prop('worth') to acquire oregon fit the actual worth of an enter tract.
• Disabled Government: Usage .prop('disabled') to change oregon disable signifier components.
• HTML Attributes: Usage .attr() for attributes similar id, people, and customized information- attributes.

"Selecting betwixt .prop() and .attr() relies upon connected whether or not you demand to work together with the first HTML property oregon the actual DOM place."

For different illustration, ideate you privation to disable a fastener dynamically: . Utilizing $('myButton').prop('disabled', actual) volition appropriately disable the fastener, stopping person action. If you examine the component successful your browser's developer instruments, you'll seat the disabled property added to the HTML. Connected the another manus, utilizing $('myButton').attr('disabled', actual) mightiness not ever activity arsenic anticipated, particularly successful older variations of jQuery oregon browsers. This is due to the fact that .attr() mightiness not reliably replace the corresponding DOM place, starring to inconsistent behaviour. So, ever like .prop() once dealing with boolean properties similar disabled, checked, and chosen. For manipulating CSS lessons, see utilizing .addClass() alternatively.

Successful decision, knowing the discrimination betwixt HTML attributes and DOM properties is cardinal to efficaciously utilizing .prop() and .attr() successful jQuery. Usage .attr() for manipulating static HTML attributes, and usage .prop() for interacting with dynamic DOM properties that indicate the actual government of an component. By making this discrimination, you'll compose much strong and predictable codification, avoiding communal pitfalls related with DOM manipulation. Retrieve to ever see whether or not you demand to activity with the first HTML oregon the actual government of the component once selecting betwixt these 2 almighty jQuery strategies. Present that you realize the nuances of these strategies, you tin confidently heighten your internet improvement tasks. For precocious DOM manipulation, see exploring the MDN Internet Docs connected DOM.

.prop() vs .attr()

.prop() vs .attr() from Youtube.com