.prop () vs .attr ()

Donc jQuery 1.6 a la nouvelle fonction prop().

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

ou dans ce cas font-ils la même chose?

Et si je dois passer à l'utilisation prop(), tous les anciens attr()appels seront interrompus si je passe à 1.6?

MISE À JOUR

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>

(voir aussi ce violon: http://jsfiddle.net/maniator/JpUF2/ )

La console enregistre en getAttributetant que chaîne et en attrtant que chaîne, mais en proptant que CSSStyleDeclaration, pourquoi? Et comment cela affectera-t-il mon codage à l'avenir?

Mise à jour 1 novembre 2012

Ma réponse originale s'applique spécifiquement à jQuery 1.6. Mon conseil reste le même mais jQuery 1.6.1 a légèrement changé les choses: face à la pile prédite de sites Web cassés, l'équipe jQuery est revenue attr()à quelque chose de proche (mais pas exactement le même que) son ancien comportement pour les attributs booléens . John Resig a également blogué à ce sujet . Je peux voir la difficulté dans laquelle ils se trouvaient, mais je suis toujours en désaccord avec sa recommandation de préférer attr().

Réponse originale

Si vous n'avez utilisé que jQuery et pas le DOM directement, cela pourrait être un changement déroutant, bien qu'il s'agisse définitivement d'une amélioration conceptuelle. Pas si bon pour les bazillions de sites utilisant jQuery qui se briseront à la suite de ce changement.

Je vais résumer les principaux problèmes:

• Vous voulez généralement prop()plutôt que attr().
• Dans la majorité des cas, prop()fait ce qu'il attr()faisait. Remplacer les appels à attr()par prop()dans votre code fonctionne généralement.
• Les propriétés sont généralement plus simples à gérer que les attributs. Une valeur d'attribut ne peut être qu'une chaîne alors qu'une propriété peut être de n'importe quel type. Par exemple, la checkedpropriété est un booléen, la stylepropriété est un objet avec des propriétés individuelles pour chaque style, la sizepropriété est un nombre.
• Lorsqu'il existe à la fois une propriété et un attribut du même nom, la mise à jour de l'un mettra généralement à jour l'autre, mais ce n'est pas le cas pour certains attributs d'entrées, tels que valueet checked: pour ces attributs, la propriété représente toujours l'état actuel tandis que le L'attribut (sauf dans les anciennes versions d'IE) correspond à la valeur / vérification par défaut de l'entrée (reflétée dans la propriété defaultValue/ defaultChecked).
• Cette modification supprime une partie de la couche de jQuery magique coincée devant les attributs et les propriétés, ce qui signifie que les développeurs de jQuery devront en apprendre un peu plus sur la différence entre les propriétés et les attributs. C'est une bonne chose.

Si vous êtes un développeur jQuery et que toute cette entreprise est confuse à propos des propriétés et des attributs, vous devez prendre du recul et en apprendre un peu plus, car jQuery n'essaie plus si fort de vous protéger de ce genre de choses. Pour le mot faisant autorité mais un peu sec sur le sujet, il y a les spécifications: DOM4 , HTML DOM , DOM niveau 2 , DOM niveau 3 . La documentation DOM de Mozilla est valide pour la plupart des navigateurs modernes et est plus facile à lire que les spécifications, vous pouvez donc trouver leur référence DOM utile. Il y a une section sur les propriétés des éléments .

Pour illustrer la façon dont les propriétés sont plus simples à gérer que les attributs, considérons une case à cocher initialement cochée. Voici deux éléments HTML valides possibles pour ce faire:

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

Alors, comment savoir si la case est cochée avec jQuery? Regardez sur Stack Overflow et vous trouverez généralement les suggestions suivantes:

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

C'est en fait la chose la plus simple au monde à faire avec la checkedpropriété booléenne, qui existe et fonctionne parfaitement dans tous les principaux navigateurs scriptables depuis 1995:

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

La propriété rend également cocher ou décocher la case triviale:

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

Dans jQuery 1.6, cela devient sans ambiguïté

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

L'idée d'utiliser l' checkedattribut pour écrire une case à cocher est inutile et inutile. La propriété est ce dont vous avez besoin.

• Il n'est pas évident quelle est la bonne façon de cocher ou décocher la case en utilisant l' checkedattribut
• La valeur de l'attribut reflète l'état par défaut plutôt que l'état visible actuel (sauf dans certaines anciennes versions d'IE, ce qui rend les choses encore plus difficiles). L'attribut ne vous indique pas si la case à cocher de la page est cochée. Voir http://jsfiddle.net/VktA6/49/ .

Je pense que Tim l'a très bien dit , mais revenons en arrière:

Un élément DOM est un objet, une chose en mémoire. Comme la plupart des objets dans la POO, il a des propriétés . Il a également, séparément, une carte des attributs définis sur l'élément (provenant généralement du balisage que le navigateur a lu pour créer l'élément). Certaines propriétés de l'élément tirent leurs valeurs initiales d' attributs portant des noms identiques ou similaires ( valueobtient sa valeur initiale de l'attribut "value"; hrefobtient sa valeur initiale de l'attribut "href", mais ce n'est pas exactement la même valeur; classNamede la attribut "classe"). D'autres propriétés obtiennent leurs valeurs initiales de différentes manières: Par exemple, la parentNodepropriété obtient sa valeur en fonction de son élément parent;style , qu'elle ait ou non un attribut "style".

Considérons cette ancre dans une page à http://example.com/testing.html:

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

De l'art ASCII gratuit (et en laissant de côté beaucoup de choses):

+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| href: "http://example.com/foo.html" |
| nom: "fooAnchor" |
| id: "fooAnchor" |
| className: "test one" |
| attributs: |
| href: "foo.html" |
| nom: "fooAnchor" |
| id: "fooAnchor" |
| classe: "test one" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +

Notez que les propriétés et les attributs sont distincts.

Maintenant, bien qu'ils soient distincts, parce que tout cela a évolué plutôt que d'être conçu à partir de zéro, un certain nombre de propriétés réécrivent l'attribut dont elles dérivent si vous les définissez. Mais tous ne le font pas, et comme vous pouvez le voir hrefci-dessus, le mappage n'est pas toujours une simple "transmission de la valeur", parfois une interprétation est impliquée.

Quand je parle de propriétés étant des propriétés d'un objet, je ne parle pas dans l'abstrait. Voici du code non jQuery:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(Ces valeurs sont celles de la plupart des navigateurs; il existe certaines variations.)

L' linkobjet est une chose réelle, et vous pouvez voir qu'il y a une réelle distinction entre accéder à une propriété et accéder à un attribut .

Comme l'a dit Tim, la grande majorité du temps, nous voulons travailler avec des propriétés. C'est en partie parce que leurs valeurs (même leurs noms) ont tendance à être plus cohérentes entre les navigateurs. La plupart du temps, nous ne voulons travailler avec des attributs que lorsqu'aucune propriété ne leur est associée (attributs personnalisés), ou lorsque nous savons que pour cet attribut particulier, l'attribut et la propriété ne sont pas 1: 1 (comme avec hrefet "href" ci-dessus) .

Les propriétés standard sont présentées dans les différentes spécifications DOM:

• DOM2 HTML (largement obsolète, voir plutôt la spécification HTML )
• DOM2 Core (obsolète)
• DOM3 Core (obsolète)
• DOM4

Ces spécifications ont d'excellents index et je recommande de garder les liens à portée de main; Je les utilise tout le temps.

Les attributs personnalisés comprendraient, par exemple, tous les data-xyzattributs que vous pourriez mettre sur des éléments pour fournir des métadonnées à votre code (maintenant que cela est valable en HTML5, tant que vous vous en tenez au data-préfixe). (Les versions récentes de jQuery vous donnent accès aux data-xyzéléments via la datafonction, mais cette fonction n'est pas seulement un accesseur pour les data-xyzattributs [elle fait à la fois plus et moins que cela]; sauf si vous avez réellement besoin de ses fonctionnalités, j'utiliserais la attrfonction pour interagir avec data-xyzattribut.)

La attrfonction avait une logique compliquée pour obtenir ce qu'ils pensaient que vous vouliez, plutôt que d'obtenir littéralement l'attribut. Il a confondu les concepts. Déménager propet attrétait censé les déconfigurer. En bref dans v1.6.0 jQuery est allé trop loin à cet égard, mais la fonctionnalité a été rapidement ajouté à nouveau à attrfaire face aux situations communes où les gens utilisent attrlorsque cela est techniquement , ils devraient utiliser prop.

Ce changement a été long à venir pour jQuery. Pendant des années, ils se sont contentés d'une fonction nommée attr()qui récupérait principalement les propriétés DOM, pas le résultat que vous attendez du nom. La ségrégation de attr()et prop()devrait aider à atténuer une partie de la confusion entre les attributs HTML et les propriétés DOM. $.fn.prop()saisit la propriété DOM spécifiée, tandis qu'il $.fn.attr()saisit l'attribut HTML spécifié.

Pour bien comprendre comment ils fonctionnent, voici une explication détaillée de la différence entre les attributs HTML et les propriétés DOM:

Attributs HTML

Syntaxe:

<body onload="foo()">

Objectif: permet au balisage d'avoir des données qui lui sont associées pour les événements, le rendu et à d'autres fins.

Visualisation: l' attribut class est affiché ici sur le corps. Il est accessible via le code suivant:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

Les attributs sont renvoyés sous forme de chaîne et peuvent être incohérents d'un navigateur à l'autre. Cependant, ils peuvent être essentiels dans certaines situations. Comme illustré ci-dessus, IE 8 Quirks Mode (et ci-dessous) attend le nom d'une propriété DOM dans get / set / removeAttribute au lieu du nom d'attribut. C'est l'une des nombreuses raisons pour lesquelles il est important de connaître la différence.

Propriétés DOM

Syntaxe:

document.body.onload = foo;

Objectif: donne accès aux propriétés appartenant aux nœuds d'élément. Ces propriétés sont similaires aux attributs, mais ne sont accessibles que via JavaScript. Il s'agit d'une différence importante qui permet de clarifier le rôle des propriétés DOM. Veuillez noter que les attributs sont complètement différents des propriétés , car cette affectation de gestionnaire d'événements est inutile et ne recevra pas l'événement (le corps n'a pas d'événement onload, seulement un attribut onload).

Visualisation:

Ici, vous remarquerez une liste de propriétés sous l'onglet "DOM" dans Firebug. Ce sont des propriétés DOM. Vous en remarquerez immédiatement un certain nombre, car vous les avez déjà utilisés sans le savoir. Leurs valeurs sont ce que vous recevrez via JavaScript.

Documentation

• JavaScript: le guide définitif de David Flanagan
• Attributs HTML, Mozilla Dev Center
• Propriétés des éléments DOM, Mozilla Dev Center

Exemple

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

Dans les versions antérieures de jQuery, cela renvoie une chaîne vide. En 1.6, il renvoie la valeur correcte, foo.

Sans avoir jeté un coup d'œil au nouveau code de l'une ou l'autre fonction, je peux dire avec confiance que la confusion a plus à voir avec la différence entre les attributs HTML et les propriétés DOM qu'avec le code lui-même. J'espère que cela a clarifié certaines choses pour vous.

-Mat

Une propriété est dans le DOM; un attribut est dans le HTML qui est analysé dans le DOM.

Plus de détails

Si vous changez un attribut, le changement sera reflété dans le DOM (parfois avec un nom différent).

Exemple: la modification de l' classattribut d'une balise modifie la classNamepropriété de cette balise dans le DOM. Si vous n'avez aucun attribut sur une balise, vous avez toujours la propriété DOM correspondante avec une valeur vide ou par défaut.

Exemple: alors que votre balise n'a pas d' classattribut, la propriété DOM classNameexiste avec une valeur de chaîne vide.

Éditer

Si vous changez l'un, l'autre sera changé par un contrôleur, et vice versa. Ce contrôleur n'est pas dans jQuery, mais dans le code natif du navigateur.

C'est juste la distinction entre les attributs HTML et les objets DOM qui crée une confusion. Pour ceux qui sont à l'aise d'agir sur les propriétés natives des éléments DOM tels qu'un this.src this.value this.checkedetc, .propc'est un accueil très chaleureux dans la famille. Pour d'autres, c'est juste une couche supplémentaire de confusion. Clarifions cela.

La façon la plus simple de voir la différence entre .attret .propest l'exemple suivant:

<input blah="hello">

1. $('input').attr('blah'): retourne 'hello'comme prévu. Pas de surprise ici.
2. $('input').prop('blah'): renvoie undefined- car il essaie de le faire [HTMLInputElement].blah- et aucune propriété de ce type sur cet objet DOM n'existe. Il n'existe que dans la portée en tant qu'attribut de cet élément, à savoir[HTMLInputElement].getAttribute('blah')

Maintenant, nous changeons quelques choses comme ceci:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

1. $('input').attr('blah'): renvoie 'apple'hein? Pourquoi ne pas "poire" car cela a été réglé en dernier sur cet élément. Parce que la propriété a été modifiée sur l'attribut d'entrée, et non sur l'élément d'entrée DOM lui-même - ils fonctionnent pratiquement presque indépendamment les uns des autres.
2. $('input').prop('blah'): Retour 'pear'

La chose à laquelle vous devez vraiment faire attention est de ne pas mélanger l'utilisation de ceux-ci pour la même propriété dans votre application pour la raison ci-dessus.

Voir un violon démontrant la différence: http://jsfiddle.net/garreh/uLQXc/

.attrvs .prop:

Tour 1: style

<input style="font:arial;"/>

• .attr('style') - renvoie des styles en ligne pour l'élément correspondant, c'est-à-dire "font:arial;"
• .prop('style') - retourne un objet de déclaration de style ie CSSStyleDeclaration

Tour 2: valeur

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value')- retourne 'hello'*
• .prop('value') -- Retour 'i changed the value'

* Remarque: jQuery pour cette raison a une .val()méthode, qui en interne est équivalente à.prop('value')

TL; DR

Utilisez prop()plus attr()dans la majorité des cas.

Une propriété est l'état actuel de l'élément d'entrée. Un attribut est la valeur par défaut.

Une propriété peut contenir des éléments de différents types. Un attribut ne peut contenir que des chaînes

Contrôle sale

Ce concept fournit un exemple où la différence est observable: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Essaye le:

• cliquez sur le bouton. Les deux cases à cocher ont été cochées.
• décochez les deux cases.
• cliquez à nouveau sur le bouton. Seule la propcase à cocher a été cochée. COUP!

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

Pour certains attributs comme disabledon button, l'ajout ou la suppression de l'attribut content disabled="disabled"bascule toujours la propriété (appelée attribut IDL en HTML5) car http://www.w3.org/TR/html5/forms.html#attr-fe-disabled dit:

L'attribut IDL désactivé doit refléter l'attribut de contenu désactivé.

vous pourriez donc vous en tirer, bien qu'il soit moche car il modifie le HTML sans besoin.

Pour d'autres attributs comme checked="checked"on input type="checkbox", les choses se cassent, car une fois que vous cliquez dessus, il devient sale, puis l'ajout ou la suppression de l' checked="checked"attribut content ne fait plus basculer la vérification .

C'est pourquoi vous devriez utiliser principalement .prop, car cela affecte directement la propriété effective, au lieu de compter sur des effets secondaires complexes de modification du code HTML.

Tout est dans le doc :

La différence entre les attributs et les propriétés peut être importante dans des situations spécifiques. Avant jQuery 1.6, la méthode .attr () tenait parfois compte des valeurs de propriété lors de la récupération de certains attributs, ce qui pouvait entraîner un comportement incohérent. Depuis jQuery 1.6, la méthode .prop () fournit un moyen de récupérer explicitement les valeurs des propriétés, tandis que .attr () récupère les attributs.

Alors utilisez un accessoire!

les attributs sont dans votre document / fichier texte HTML (== imaginez que c'est le résultat de votre balisage html analysé), tandis que les
propriétés sont dans l' arborescence DOM HTML (== essentiellement une propriété réelle d'un objet au sens JS).

Surtout, beaucoup d'entre eux sont synchronisés (si vous mettez à jour la classpropriété, l' classattribut en html sera également mis à jour; et sinon). Mais certains attributs peuvent être synchronisés avec des propriétés inattendues - par exemple, l' attribut checked correspond à la propriété defaultChecked , de sorte que

• la vérification manuelle d'une case à cocher modifiera la .prop('checked')valeur, mais ne changera pas .attr('checked')et les .prop('defaultChecked')valeurs
• le paramètre $('#input').prop('defaultChecked', true)changera également .attr('checked'), mais cela ne sera pas visible sur un élément.

La règle générale est la suivante : la .prop()méthode doit être utilisée pour les propriétés / attributs booléens et pour les propriétés qui n'existent pas en html (comme window.location). Tous les autres attributs (ceux que vous pouvez voir dans le html) peuvent et doivent continuer à être manipulés avec la .attr() méthode. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

Et voici un tableau qui montre où .prop()est préféré (même s'il .attr()peut encore être utilisé).

Pourquoi voudriez-vous parfois utiliser .prop () au lieu de .attr () où ce dernier est officiellement conseillé?

1. .prop()peut renvoyer n'importe quel type - chaîne, entier, booléen; tandis que .attr()renvoie toujours une chaîne.
2. .prop()est censé être environ 2,5 fois plus rapide que .attr().

.attr():

• Obtenez la valeur d'un attribut pour le premier élément de l'ensemble des éléments correspondants.
• Vous donne la valeur de l'élément telle qu'elle a été définie dans le html au chargement de la page

.prop():

• Obtenez la valeur d'une propriété pour le premier élément de l'ensemble des éléments correspondants.
• Donne les valeurs mises à jour des éléments qui sont modifiées via javascript / jquery

Habituellement, vous souhaiterez utiliser des propriétés. N'utilisez des attributs que pour:

1. Obtenir un attribut HTML personnalisé (car il n'est pas synchronisé avec une propriété DOM).
2. Obtenir un attribut HTML qui ne se synchronise pas avec une propriété DOM, par exemple obtenir la "valeur d'origine" d'un attribut HTML standard, comme <input value="abc">.

attributes -> HTML

properties -> DOM

Avant jQuery 1.6, la attr()méthode prenait parfois en compte les valeurs des propriétés lors de la récupération des attributs, ce qui provoquait un comportement plutôt incohérent.

L'introduction de la prop()méthode fournit un moyen de récupérer explicitement les valeurs des propriétés, tout en .attr()récupérant les attributs.

Les documents:

jQuery.attr() Obtenez la valeur d'un attribut pour le premier élément de l'ensemble d'éléments correspondants.

jQuery.prop() Obtenez la valeur d'une propriété pour le premier élément de l'ensemble des éléments correspondants.

Rappelez doucement l'utilisation prop(), par exemple:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

La fonction ci-dessus permet de vérifier si checkbox1 est cochée ou non, si cochée: return 1; sinon: retourne 0. Fonction prop () utilisée ici comme fonction GET.

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

La fonction ci-dessus est utilisée pour définir la case à cocher1 à vérifier et toujours retourner 1. Maintenant, la fonction prop () est utilisée comme fonction SET.

Ne vous trompez pas.

P / S: Lorsque je vérifie la propriété Image src . Si le src est vide, prop renvoie l'URL actuelle de la page (incorrecte) et attr retourne une chaîne vide (droite).

Une chose .attr()peut faire qui ne .prop()peut pas: affecter les sélecteurs CSS

Voici un problème que je n'ai pas vu dans les autres réponses.

Sélecteur CSS [name=value]

• répondra à .attr('name', 'value')
• mais pas toujours .prop('name', 'value')

.prop() affecte seulement quelques sélecteurs d'attributs

• input[name] (merci @TimDown )

.attr() affecte tous les sélecteurs d'attributs

• input[value]
• input[naame]
• span[name]
• input[data-custom-attribute](aucun .data('custom-attribute')n'affectera ce sélecteur)

1) Une propriété est dans le DOM; un attribut est dans le HTML qui est analysé dans le DOM.

2) $ (elem) .attr ("vérifié") (1.6.1+) "vérifié" (chaîne) Change avec l'état de la case à cocher

3) $ (elem) .attr ("vérifié") (pré-1.6) true (booléen) Modifié avec l'état de la case à cocher

• Généralement, nous voulons utiliser un objet DOM plutôt qu'un attribut personnalisé comme data-img, data-xyz.

• Également une certaine différence lors de l'accès à la checkboxvaleur et href avec attr()et au prop()fur et à mesure que la chose change avec la sortie DOM avec prop()comme lien complet à partir de originet Booleanvaleur pour la case à cocher (pre-1.6)

• On ne peut accéder aux éléments DOM qu'avec d' propautres alors ça donneundefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

Il y a quelques autres considérations dans prop () vs attr ():

• selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked et defaultSelected..etc doivent être récupérés et définis avec la méthode .prop (). Ceux-ci n'ont pas d'attributs correspondants et ne sont que des propriétés.

• Case à cocher pour le type d'entrée

     .attr('checked') //returns  checked
     .prop('checked') //returns  true
     .is(':checked') //returns true

• La méthode prop renvoie une valeur booléenne pour les éléments cochés, sélectionnés, désactivés, readOnly..etc tandis que attr renvoie la chaîne définie. Ainsi, vous pouvez directement utiliser .prop ('coché') dans if condition.

• .attr () appelle .prop () en interne, donc la méthode .attr () sera légèrement plus lente que d'y accéder directement via .prop ().

La réponse de Gary Hole est très pertinente pour résoudre le problème si le code est écrit de cette manière

obj.prop("style","border:1px red solid;")

Étant donné que la fonction prop renvoie un CSSStyleDeclarationobjet, le code ci-dessus ne fonctionnera pas correctement dans certains navigateurs (testé avec IE8 with Chrome Frame Plugindans mon cas).

Le changeant ainsi en code suivant

obj.prop("style").cssText = "border:1px red solid;"

résolu le problème.