.prop() vs .attr()

Question

Alors jQuery 1.6 a la nouvelle fonction prop().

$(selector).click(function(){
    //au lieu de:
    this.getAttribute('style');
    //dois-je utiliser:
    $(this).prop('style');
    //ou:
    $(this).attr('style');
})

ou dans ce cas, est-ce qu'ils font la même chose?

Et si je dois passer à utiliser prop(), est-ce que tous les anciens appels à attr() vont casser si je passe à la version 1.6?

MISE À JOUR

selector = '#id'

$(selector).click(function() {
    //au lieu de:
    var getAtt = this.getAttribute('style');
    //dois-je utiliser:
    var thisProp = $(this).prop('style');
    //ou:
    var thisAttr = $(this).attr('style');

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

test

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

La console enregistre le getAttribute comme une chaîne, et le attr comme une chaîne, mais le prop comme une CSSStyleDeclaration, Pourquoi? Et comment cela affecte-t-il mon codage à l'avenir?

Answer 1

 

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

   

2) $( elem ).attr( "checked" ) (1.6.1+) "checked" (String) va   changer avec l'état de la case à cocher

   

3) $( elem ).attr( "checked" ) (pré-1.6) true (Boolean) Changé   avec l'état de la case à cocher

• En général, nous voulons utiliser des objets DOM plutôt que des attributs personnalisés comme data-img, data-xyz.

• Aussi quelques différences lors de l'accès à la valeur de la case à cocher et de href avec attr() et prop() car les choses changent avec la sortie du DOM avec prop() comme lien complet à partir de origin et valeur Boolean pour une case à cocher (pré-1.6)

• Nous ne pouvons accéder qu'aux éléments du DOM avec prop autrement, cela donne undefined

      démonstration de la prop       p {       margin: 20px 0 0;     }     b {       color: blue;     }  

      Cochez-moi  

        $("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();

Answer 2

Il existe 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(). Ils n'ont pas d'attributs correspondants et ne sont que des propriétés.

• Pour le type de champ de saisie checkbox

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

• La méthode prop retourne une valeur booléenne pour checked, selected, disabled, readOnly..etc tandis que attr retourne une chaîne définie. Ainsi, vous pouvez directement utiliser .prop('checked') dans une condition if.

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

Answer 3

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

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

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

Changer le code en

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

a résolu le problème.