.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 do doivent passer à l'aide prop() , tous les vieux attr() appels se casseront 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 le getAttribute comme une chaîne, et le attr comme une chaîne, mais le prop comme un CSSStyleDeclaration , pourquoi? Et comment cela affecte mon codage dans l'avenir?

2090
demandé sur Neal 2011-05-03 23:33:28
la source

18 ответов

Mise À Jour 1er 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 cassés, l'équipe de jQuery reversé attr() à quelque chose proche de (mais pas exactement le même que) son ancien comportement pour les attributs booléens . John Resig également blogué à ce sujet . Je peut voir la difficulté qu'ils étaient mais toujours en désaccord avec sa recommandation à préférer attr() .

réponse Originale à cette question

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

je vais résumez les principales questions:

  • vous voulez habituellement prop() plutôt que attr() .
  • dans la majorité des cas, prop() fait ce que attr() faisait. Remplacer les appels à attr() par prop() dans votre code fonctionnera généralement.
  • Les propriétés
  • sont généralement plus simples à traiter que les attributs. La valeur d'un attribut ne peut être qu'une chaîne alors qu'une propriété peut être de tout type. Pour exemple, la propriété checked est un booléen, la propriété style est un objet avec des propriétés individuelles pour chaque style, la propriété size est un nombre.
  • Lorsqu'il existe à la fois une propriété et un attribut portant le même nom, mettre à jour l'un mettra généralement l'autre à jour, mais ce n'est pas le cas pour certains attributs d'inputs, tels que value et checked : pour ces attributs, la propriété représente toujours l'état courant tandis que le l'attribut (sauf dans les anciennes versions D'IE) correspond à la valeur par défaut/vérification de l'entrée (reflétée dans la propriété defaultValue / defaultChecked ).
  • ce changement supprime une partie de la couche de magic jQuery collée devant les attributs et les propriétés, ce qui signifie que les développeurs de jQuery devront en apprendre un peu 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 êtes confus par toute cette affaire sur les propriétés et les attributs, vous devez prendre un peu de recul et apprendre un peu à ce sujet, depuis jQuery n'est plus essayer si dur de vous protéger de ce genre de choses. Pour le mot autoritaire mais un peu sec sur le sujet, Il ya les spécifications: DOM4 , DOM HTML , 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, de sorte que vous pouvez trouver leur DOM référence utile. Il y a une section sur les propriétés des éléments .

comme exemple de la façon dont les propriétés sont plus simples à traiter que les attributs, considérons une case à cocher qui est initialement cochée. Voici deux morceaux de HTML valide pour le 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? Regarde sur le Débordement de pile 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 propriété booléenne checked , qui a existé et fonctionné parfaitement dans chaque navigateur scriptable majeur depuis 1995:

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

la propriété rend également la vérification ou le décochage de la case à cocher trivial:

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

dans jQuery 1.6, ceci devient sans ambiguïté

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

l'idée d'utiliser l'attribut checked pour scripter une case à cocher n'est ni utile ni nécessaire. La propriété est ce dont vous avez besoin.

  • il n'est pas évident Quelle est la bonne façon de vérifier ou décocher la case à cocher utilise l'attribut checked
  • la valeur de l'attribut reflète la valeur par défaut plutôt que l'état visible actuel (sauf dans certaines versions plus anciennes D'IE, ce qui rend les choses encore plus difficiles). L'attribut ne vous dit pas si la case à cocher sur la page est cochée ou non. Voir http://jsfiddle.net/VktA6/49 / .
1754
répondu Tim Down 2018-08-03 16:43:57
la source

je pense Tim l'a très bien dit , mais prenons du recul:

un élément DOM est un objet, une chose en mémoire. Comme la plupart des objets dans OOP, il a propriétés . Il contient aussi, séparément, une carte des attributs définis sur l'élément (provenant habituellement du balisage que le navigateur a lu pour créer l'élément). Certains de l'élément propriétés leur initial valeurs de attributs avec des noms identiques ou similaires ( value obtient sa valeur initiale de l'attribut "value"; href obtient sa valeur initiale de l'attribut "href", mais ce n'est pas exactement la même valeur; className de l'attribut "class"). D'autres propriétés obtiennent leurs valeurs initiales d'une autre manière: par exemple, la propriété parentNode obtient sa valeur basée sur ce qu'est son élément parent; un élément a toujours un style propriété, 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>

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

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
|             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"                      |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

noter 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 la base, un certain nombre de propriétés écrire de nouveau à l'attribut qu'ils ont tiré de si vous les définissez. Mais tous ne le font pas, et comme vous pouvez le voir dans href ci-dessus, la cartographie n'est pas toujours un "pass the value on", parfois il y a interprétation.

quand je parle de propriétés d'un objet, je ne parle pas dans l'abstrait. Voici un 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 y a quelques variations.)

l'objet link est une chose réelle, et vous pouvez voir qu'il y a une vraie distinction entre accéder à une propriété sur elle, et accéder à un attribut .

Comme Tim dit, le grande majorité de l'époque, nous voulons travailler avec les propriétés. En partie parce que leurs valeurs (même leurs noms) ont tendance à être plus uniformes d'un navigateur à l'autre. Nous voulons surtout travailler avec attributs lorsqu'il n'y a pas de propriété lié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 href et "href" ci-dessus).

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

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

les attributs personnalisés comprendraient, par exemple, tout data-xyz attributs que vous pouvez mettre sur des éléments pour fournir des méta-données à votre code (maintenant que c'est valide à partir de HTML5, tant que vous vous en tenez au préfixe data- ). (Les versions récentes de jQuery vous donnent accès aux éléments data-xyz via la fonction data , mais cette fonction est et non juste un accessor pour les attributs data-xyz [il fait à la fois plus et moins que cela]; à moins que vous ayez réellement besoin de ses fonctionnalités, j'utiliserais la fonction attr pour interagir avec data-xyz attribut.)

la fonction attr avait l'habitude d'avoir une certaine logique alambiquée autour d'obtenir ce qu'ils pensaient que vous vouliez, plutôt que littéralement obtenir l'attribut. Il a confondu les concepts. Le passage à prop et attr devait les désassembler. Brièvement en v1.6.0 jQuery est allé trop loin à cet égard, mais la fonctionnalité a été rapidement ajoutée en arrière à attr pour gérer les situations communes où les gens utiliser attr alors que techniquement ils devraient utiliser prop .

630
répondu T.J. Crowder 2017-05-23 15:10:44
la source

ce changement a été long à venir pour jQuery. Pendant des années, ils se sont contentés d'une fonction appelée attr() qui récupérait la plupart des propriétés DOM, pas le résultat que l'on attend du nom. La ségrégation de attr() et prop() devrait aider à réduire la confusion entre les attributs HTML et les propriétés DOM. $.fn.prop() s'empare de la propriété DOM déterminée, tandis que $.fn.attr() s'empare de la propriété Dom déterminée. Attribut HTML.

pour bien comprendre leur fonctionnement, 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()">

but: Permet à markup d'avoir des données associées avec lui pour les événements, le rendu, et d'autres fins.

Visualisation: HTML Attributes L'attribut de classe est présentée ici sur le corps. Il est accessible par le code suivant:

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

sont retournés sous forme de chaîne de caractères et peuvent être incohérents d'un navigateur à l'autre. Cependant, ils peuvent être indispensable 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 un des nombreux raisons pourquoi il est important de connaître la différence.

DOM "Propriétés de la 1519200920"

syntaxe:

document.body.onload = foo;

but: Donne accès aux propriétés qui appartiennent aux noeuds d'éléments. Ces propriétés sont similaires aux attributs, mais ne sont accessibles que par JavaScript. Il s'agit d'une différence importante qui aide à 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 tâche 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: DOM Properties

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 plusieurs, comme vous l'avez utilisé avant sans le savoir. Leurs valeurs sont celles que vous recevrez par JavaScript.

Documentation

Exemple

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

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

dans les versions précédentes de jQuery, cela renvoie une chaîne vide. En 1.6, il renvoie la valeur correcte, foo .

sans avoir regardé le nouveau code pour 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 ce effacé certaines choses pour vous.

Mat

238
répondu K.Dᴀᴠɪs 2018-03-31 00:41:31
la source

une propriété est dans le DOM; un attribut est dans le HTML qui est divisé 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: changer l'attribut class d'une étiquette changera la propriété className de cette étiquette dans le DOM. Si vous n'avez pas d'attribut sur une étiquette, vous avez toujours la propriété DOM correspondante avec une valeur vide ou par défaut.

exemple: alors que votre étiquette n'a pas d'attribut class , la propriété DOM className existe avec une valeur de chaîne vide.

modifier

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

236
répondu HerrSerker 2016-11-15 10:09:15
la source

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 indigènes DOM éléments tels que this.src this.value this.checked etc, .prop est un accueil très chaleureux à la famille. Pour d'autres, c'est juste une couche supplémentaire de confusion. Disons-le clairement.

la façon la plus facile de voir la différence entre .attr et .prop est l'exemple suivant:

<input blah="hello">
  1. $('input').attr('blah') : retourne 'hello' comme prévu. Pas de surprises ici.
  2. $('input').prop('blah') : retourne undefined -- parce qu'il essaie de faire [HTMLInputElement].blah -- et aucune propriété de ce genre sur cet objet DOM n'existe. Elle n'existe que dans le champ d'application 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') : retourne 'apple' hein? Pourquoi pas "poire" puisque c'est la dernière sur cet élément. Parce que la propriété a été changée sur l'attribut input, pas sur L'élément input DOM lui-même -- ils fonctionnent pratiquement indépendamment les uns des autres.
  2. $('input').prop('blah') : retourne 'pear'

La chose que vous avez vraiment besoin d'être prudent avec est juste ne mélangez pas l'utilisation de ceux-ci pour la même propriété tout au long de votre application pour la raison ci-dessus.

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


.attr vs .prop :

Ronde 1: le style

<input style="font:arial;"/>
  • .attr('style') -- renvoie les styles en ligne pour l'élément apparié i.e. "font:arial;"
  • .prop('style') -- renvoie un objet de déclaration de style i.e. CSSStyleDeclaration

Ronde 2: la valeur

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

$('input').prop('value', 'i changed the value');
  • .attr('value') -- retourne 'hello' *
  • .prop('value') -- retourne 'i changed the value'

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

134
répondu Gary Green 2011-05-19 18:19:03
la source

TL; DR

utiliser prop() au-dessus de attr() dans la majorité des cas.

Un 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 choses de différents types. Un attribut ne peut contenir que des chaînes

49
répondu agjmills 2015-03-09 19:21:13
la source

Sale checkedness

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

l'Essayer:

  • cliquez sur le bouton. Les deux cases de me contrôler.
  • , décochez les deux cases.
  • cliquez à nouveau sur le bouton. Seul le La case prop a été cochée. BANG!

$('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 disabled sur button , ajouter ou supprimer l'attribut disabled="disabled" change toujours la propriété (appelé attribut IDL dans HTML5) parce que http://www.w3.org/TR/html5/forms.html#attr-fe-disabled dit:

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

donc vous pourriez vous en tirer, bien qu'il soit laid puisqu'il modifie HTML sans besoin.

pour d'autres attributs comme checked="checked" sur input type="checkbox" , les choses se cassent, parce qu'une fois que vous cliquez dessus, cela devient sale, et puis Ajouter ou supprimer checked="checked" l'attribut de contenu ne coche plus .

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

35
la source

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, le .la méthode attr () prend parfois en compte les valeurs des propriétés lors de la récupération de certains attributs, ce qui peut causer un comportement incohérent. Comme de jQuery 1.6, l' .la méthode prop () fournit un moyen de récupérer explicitement les valeurs des propriétés, while .attr () ne récupère que les attributs.

Alors utilisez l'hélice !

32
répondu Arnaud F. 2011-05-03 23:35:47
la source

les attributs sont dans votre HTML document/fichier texte (==imaginez que c'est le résultat de votre balisage html analysé), alors que

propriétés sont dans HTML DOM tree (==essentiellement une propriété réelle d'un objet dans le sens de JS).

important, beaucoup d'entre eux sont synchronisés (si vous mettez à jour class propriété, class attribut dans html sera également mis à jour; sinon). mais certains attributs peuvent être synchronisés avec des propriétés inattendues - par exemple, attribut checked correspond à propriété defaultChecked , de sorte que

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

la règle empirique est : la méthode .prop() doit être utilisée pour les attributs/propriétés booléens et pour les propriétés qui n'existent pas en html (comme la fenêtre.emplacement.) Tous les autres attributs (ceux que vous pouvez voir dans le html) peut et doit continuer à être manipulé avec le .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 si .attr() peut toujours servir).

table with preferred usage


" pourquoi voudriez-vous parfois utiliser .prop() au lieu de .attr () où cette dernière est officiellement conseillée?

  1. .prop() peut renvoyer n'importe quel type - chaîne, entier, booléen; tandis que .attr() renvoie toujours une chaîne.
  2. .prop() est dit être d'environ 2,5 fois plus rapide que le .attr() .
26
répondu lakesare 2015-06-12 10:09:35
la source

.attr() :

  • Obtenir la valeur d'un attribut pour le premier élément dans l'ensemble d'éléments qui correspondent.
  • vous donne la valeur de l'élément comme il a été défini dans le html sur la charge de page

.prop() :

  • Obtenir la valeur d'un propriété pour le premier élément dans l'ensemble d'éléments qui correspondent.
  • donne les valeurs mises à jour des éléments qui sont modifiés via javascript /jquery
18
répondu Kgn-web 2017-11-22 15:18:20
la source

habituellement, vous voulez utiliser des propriétés. N'utilisez les attributs que pour:

  1. obtenir un attribut HTML personnalisé (puisqu'il n'est pas synchronisé avec une propriété DOM).
  2. obtention d'un attribut HTML qui ne se synchronise pas avec une propriété DOM, p.ex. obtention de la "valeur originale" d'un attribut HTML standard, comme <input value="abc">.
13
répondu naor 2014-02-03 00:36:51
la source

attributes - > HTML

properties - > DOM

7
répondu NkS 2014-12-26 16:28:55
la source

avant jQuery 1.6, la attr() méthode parfois a tenu compte des valeurs de propriété lors de la récupération des attributs, ce qui a causé un comportement plutôt incohérent.

l'introduction de 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.

Les Docs:

jQuery.attr() Obtenir la valeur d'un attribut pour le premier élément de l'ensemble des éléments appariés.

jQuery.prop() Obtenir la valeur d'une propriété pour le premier élément dans l'ensemble d'éléments qui correspondent.

6
répondu Gothburz 2017-11-22 15:38:36
la source

petit rappel sur l'utilisation de prop() , exemple:

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

la fonction ci-dessus est utilisée pour vérifier si la case à cocher 1 est cochée ou non, si cochée: return 1; sinon: return 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 régler la case à cocher 1 à cocher et toujours retourner 1. Maintenant, la fonction prop() est utilisée comme une fonction définie.

ne déconne pas.

P/S: Quand je vérifie L'Image src propriété. Si le src est vide, prop retourner L'URL actuelle de la page (erroné), et attr retour chaîne vide (droite).

2
répondu user2657778 2018-03-31 00:43:17
la source

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

2) $ (elem).attr( "checked" ) (1.6.1+) "vérifié" (Chaîne de caractères) changer avec l'état de case à cocher

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

  • la plupart du temps, nous voulons utiliser pour DOM objet plutôt que sur mesure attribut comme data-img, data-xyz .

  • également une partie de la différence lors de l'accès checkbox valeur et href avec attr() et prop() comme changement de chose avec la sortie DOM avec prop() comme lien complet de la valeur origin et Boolean pour la case à cocher (pre-1.6)

  • nous ne pouvons accéder aux éléments DOM avec prop autre qu'il donne undefined

<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>
0
répondu Parth Trivedi 2015-12-18 12:28:27
la source

.prop ()

.prop( propertyName )
propertyName
Type: String
The name of the property to get.

The .la méthode prop() obtient la valeur de propriété pour seulement le premier élément dans l'ensemble correspondant. Il retourne non défini pour la valeur d'une propriété qui n'a pas été définie, ou si l'ensemble n'a pas d'éléments. Obtenir la valeur pour chaque élément individuellement, utilisez une construction En Boucle tel comme jQuery .chacun() ou .méthode map ().

<html>
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</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>

.ATR()

.attr( attributeName )
attributeName
Type: String
The name of the attribute to get.

The .la méthode attr() obtient la valeur de l'attribut pour seulement le premier élément dans l'ensemble correspondant. Pour obtenir la valeur de chaque élément individuellement, utilisez une boucle de construction comme jQuery.chacun() ou .méthode map ().

avec jQuery .attr() la méthode pour obtenir la valeur d'un élément attribut a deux principaux avantages:

Commodité: il peut être appelé directement sur un objet jQuery et enchaîné à d'autres méthodes de jQuery. Cohérence entre les navigateurs: les valeurs de certains les attributs sont signalés de manière incohérente entre les navigateurs, et même à travers les versions d'un même navigateur. Le. attr() méthode permet de réduire de tels incohérence.

<html>
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  em {
    color: blue;
    font-weight: bold;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>

The title of the emphasis is:<div></div>

<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>

</body>
</html>
0
répondu Alireza 2018-05-27 08:02:57
la source

jQuery 1.6 introduit .prop() fonction et sépare les attributs et les propriétés DOM, il a soulevé beaucoup de questions sur la différence entre .attr et .prop fonctions.

voir ci-dessous exemples:

exemple: 1)

<input id="demo" type="text" dbvalue="Kansagara" />

$("#demo").attr("dbvalue");   // returns Kansagara
$("#demo").prop("dbvalue");   // returns undefined

.prop () renvoie la valeur de L'attribut HTML DOM, il ne renvoie pas la valeur de l'attribut personnalisé while .attr () renvoie également la valeur de l'attribut personnalisé indiqué ci-dessus.

Exemple: 2)

<input id="demo" type="text" value="Kansagara" />

maintenant, j'ai changé le texte ‘Kansagara‘ en ‘Hitesh‘ dans textbox.

$("#demo").attr("value");   // returns Kansagara
$("#demo").prop("value");   // returns Hitesh

Maintenant vous avez une idée de ce que cela signifie. Seule la propriété d'element est changée, car elle est dans le DOM et la dynamique. Mais l'attribut de l'élément est dans le texte HTML et ne peut pas être modifié. Au sens large, la propriété représente toujours l'état courant tandis que l'attribut (sauf dans les anciennes versions D'IE) représente l'état initial ou est destiné au html les attributs comme ils sont strictement définis. l'attribut ne vous dit rien de l'état actuel.

pour une case à cocher (jquery 1.6+)

<input id="check1" checked="checked" type="checkbox" />

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

prop method retourne la valeur booléenne pour vérifié, sélectionné, désactivé, readOnly..etc tandis que attr renvoie une chaîne définie. Ainsi, vous pouvez utiliser directement .prop(‘checked’) si la condition.

.appels d'attr ().prop() en interne .la méthode attr() sera légèrement plus lente que l'accès directement à travers .prop().

Pour jQuery 1.6+, prop sera le plus souvent utilisé car il est simple et plus large que attr. Dans la plupart des anciens projets, attr est utilisé pour obtenir des informations sur l'état actuel de l'élément. Mais maintenant, prop a pris ce travail et attr serait remplacé par prop.

l'Espoir, Ça aide.

0
répondu Hitesh Kansagara 2018-06-08 16:19:26
la source

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

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

puisque la fonction prop retourne CSSStyleDeclaration objet, code ci-dessus ne fonctionnera pas correctement dans un certain navigateur(testé avec IE8 with Chrome Frame Plugin dans mon cas).

le changeant ainsi en code suivant

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

a résolu le problème.

-2
répondu zawhtut 2015-10-15 13:30:09
la source

Autres questions sur javascript jquery dom attr prop