11497 sujets

JavaScript, DOM et API Web HTML5

Ajouter attribut data dans HTML via JS (ou CSS)

Bonjour,

Je souhaiterai trouver une méthode pour ajouter dynamiquement des attributs data dans des balises HTML.
Je pense qu'en Javascript cela doit être faisable mais je n'ai trouvé que des exemples pour ajouter des attributs class et non des attributs data.

Par exemple, J'aimerai passer dynamiquement de :
<div class="maClass"></div>

à :
<div class="maClass" data-attribut1="valeur1" data-attribut2="valeur2"></div>


Par ailleurs, serait-il possible de faire cela simplement en CSS ?
Avec un code ressemblant à :
.maClass{ [data-attribut1="valeur1"]; [data-attribut2="valeur2"]  }


Je sais qu'avec CSS3 on peut cibler un attribut data mais peut-on en ajouter ?

Merci d'avance
Modifié par fred2501 (18 Nov 2016 - 14:38)
Modérateur
Bonjour,

fred2501 a écrit :

Voici ce que j'aimerai ajouter dynamiquement à mes mes balise HTML (en gras) :
&lt;div class="maclass" data-attribut1="valeur1"] data-attribut2="valeur2"&gt;&lt;/div&gt;
Je t'invite à consulter MDN - Element.setAttribute().
Comme son nom l'indique elle permet d'insérer un attribut à une balise html et d'en spécifier sa valeur.
Remarque: tu n'es nullement obligé d'introduire un attribut reconnu par les spécificités du langage. Techniquement, si tu souhaite ajouter l'attribut "machin" avec pour valeur "truc" il te suffit d'introduire la fonction element.setAttribute("machin", "truc") et celui-ci sera inséré au sein de la balise représentée par element


fred2501 a écrit :

Par ailleurs, serait-il possible de faire cela simplement en CSS ?
Avec un code ressemblant à :
.maclass{ [data-attribut1="valeur1"]; [data-attribut2="valeur2"]  }


Je sais qu'avec CSS3 on peut cibler un attribut data mais peut-on en ajouter ?
Non il est impossible d'ajouter/enlever/modifier des éléments html via Css. On ne peut que les personnaliser (et c'est déjà pas mal), Css n'étant pas un langage de programmation.

Bonne journée.
Modifié par Greg_Lumiere (18 Nov 2016 - 14:48)
Administrateur
Bonjour,

on peut sélectionner un élément selon ses attributs :
[data-attr1*="jeDoisÊtrePrésent"] { }
[aria-hidden="true"] {}

/* et pour un pseudo : */
a:after { content: attr(href);  }

mais ça se limite à ça
Modifié par Felipe (18 Nov 2016 - 15:48)
Merci beaucoup pour la fonction setAttribute() et les éclaircissements au sujet de CSS.

Avec getElementByID() c'est assez simple pour cibler/modifier un élément avec un Id.
Mais pour faire ça sur plusieurs éléments avec des Class, je n'y arrive toujours pas.
J'ai essayer avec getElementsByClassName() et rien ne se produit.
Avec getElementsByTagName(), également, ça ne semble pas faire effet.

J'ai aussi tester avec jQuery :
document.querySelector('#monId') > fonctionne très bien avec setAttribute()
document.querySelector('.maClass') > ne fonctionne pas avec setAttribute()

Quelqu'un saurait pourquoi la fonction setAttribute() est capricieuse pour cibler des éléments avec des Class ou autres selecteurs que des Id ?
Modifié par fred2501 (19 Nov 2016 - 13:58)
Bonsoir Fred2501,
essaie
document.querySelector('.maClass')
sans point :
document.querySelector('maClass')
à tout hasard ...
Modifié par pictural (19 Nov 2016 - 22:46)
Bonjour.
fred2501 a écrit :

J'ai aussi tester avec jQuery :
document.querySelector('#monId') &gt; fonctionne très bien avec setAttribute()
document.querySelector('.maClass') &gt; ne fonctionne pas avec setAttribute()


Hum... ça n'a, a priori, rien à voir. Cibler un élément du DOM et appliquer une méthode sont deux choses différentes. On peut cibler de multiples façons. Je dis cela parce que j'utilise en général des variables et je ne procède pas directement.

Et qu'est-ce que jQuery vient faire dans l'histoire ? querySelector ne fait pas partie de jQuery.

Smiley confus
Administrateur
Il y a une différence avec l'API querySelector/querySelectorAll si l'on passe un id ou une classe.

Un id = un élément unique dans la page donc querySelector suffit car cette fonction ne retourne qu'un élément.
Une classe = un ou plusieurs éléments possibles dans la page, dans ce cas il faut utiliser queryselectorAll et ensuite faire une itération sur le résultat pour tous les parcourir.

On ne peut pas directement exploiter le résultat et appliquer setAttribute() si plusieurs éléments correspondent. Il faut nécessairement faire une boucle pour les examiner chacun.

Par exemple en brut:
var elements = document.querySelectorAll('.maClass');
for (var n=0; n < elements.length; i++) {
    elements[n].setAttribute('attribut1', 'valeur1');
}


Avec jQuery on peut se servir de la fonction data() qui permet d'aller lire la valeur des attributs data-* en HTML5 et de les modifier/insérer.

$('.maClass').data('attribut1','valeur1');


var donnees = $('.maClass').data();

Modifié par dew (21 Nov 2016 - 09:43)
Modérateur
fred2501 a écrit :

J'ai essayer avec getElementsByClassName() et rien ne se produit.
Avec getElementsByTagName(), également, ça ne semble pas faire effet.
Probablement une erreur de syntaxe. Et comme le souligne Dew, le résultat étant un tableau, il te faut le parcourir par une boucle pour appliquer ce dont tu désire.
Sujet clos
Aller à