"Accès aux données" attribut sans jQuery

Puis-je accéder à un attribut data - sans jQuery?

C'est facile avec jQuery, mais je ne peux pas voir n'importe où comment le faire sans jQuery.

Si je fais une recherche sur Google "sans jQuery' tout ce que je reçois est jQuery exemples.

Est-il même possible?

InformationsquelleAutor user2143356 | 2013-04-09
  1. 106

    Sur ici j'ai trouvé ça par exemple:

    <div id='strawberry-plant' data-fruit='12'></div>
<script>
    //'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); //fruitCount = '12'
    //'Setting' data-attributes using setAttribute
    plant.setAttribute('data-fruit', '7'); //Pesky birds
</script>

    De sorte qu'il semble très faisable.

    • Première réponse + fonctionne sur tous les navigateurs
    • Cela semble être la bonne approche. En outre, vous aurez probablement besoin pour être en mesure de faire quelque chose comme ceci: document.getElementById('fraise-plant).setAttribute('data-fruits", "Quelques Données Ici');
    • Veuillez voir tomor la réponse ci-dessous concernant dataset - c'est la bonne réponse, sauf si vous avez le soutien obsolète navigateurs web (IE), ce qui est vraiment dommage pour vous si c'est le cas... modernes, Toutes les versions du navigateur en charge HTML5 et ECMAScript 5 (pour sûr) et 6 presque complètement à ce point.
    InformationsquelleAutor fredrik
  2. 33

    Vous pouvez utiliser le dataset attribut. Comme dans: 

    element = document.getElementById("el");
alert(element.dataset.name); //element.dataset.name == data-name
    • Voir prise en charge de dataset: caniuse.com/dataset
    • Remarque: bien que tout à fait correct, cela ne fonctionnera que sur HTML5 compatible navigateurs. À l'aide de la getAttribute méthode fonctionne sur la plupart des navigateurs.
    • Tout n'est pas nécessairement compatible avec les navigateurs obsolètes (par exemple, toutes les version de IE), c'est la bonne réponse. Il a certainement été avant-gardiste à l'époque (en 2013) mais maintenant 5 ans, c'est la façon dont il devrait être fait.
    • Vous avez sauvé ma journée!
    InformationsquelleAutor tomor
  3. 2

    C'est juste un attribut ... utiliser getAttribute comme avec n'importe quel autre attribut : https://developer.mozilla.org/en/docs/DOM/element.getAttribute

    Ou suis-je à côté de l'essentiel de votre question.

    InformationsquelleAutor drquicksilver
  4. -1

    Je pense que vous pouvez essayer ceci:

    var ele = document.getElementById("myelement");
if (ele.hasOwnProperty("data")) {
  alert(ele.data);
}

    OU de l'utilisation

    alert(ele['data-property']);
    • à partir du MDN docs , Il est idéal à utiliser la méthode getAttribute depuis son plus rapide , je cite ci-dessous : ** en outre, les performances de lecture des données d'attributs par rapport à stocker ces données dans un JS de l'entrepôt de données est faible. À l'aide de l'ensemble de données est encore plus lente que la lecture des données avec getAttribute().** - lien
    InformationsquelleAutor asim-ishaq