Element.setAttribute()
Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.
Pour obtenir la valeur actuelle d'un attribut, utilisez getAttribute()
; pour supprimer un attribut, appelez removeAttribute()
.
Syntaxe
js
Element.setAttribute(name, value);
Paramètres
name
-
Une
DOMString
(chaîne de caractères) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quandsetAttribute()
est appelé sur un élément HTML dans document HTML. value
-
une
DOMString
contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.
Les attributs booléens sont considérés être true
(vrai) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide (""
) dans value
(certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' exemple ce-dessous pour une démonstration pratique.
Puisque la valeur spécifiée est convertie en chaîne, spécifier null
ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme null
, il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez removeAttribute()
.
Valeur retournée
Exceptions
InvalidCharacterError
-
Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.
Exemple
Dans l'exemple suivant, setAttribute()
est utilisé pour définir des attributs sur un <button>
(bouton).
HTML
html
<button>Hello World</button>
JavaScript
js
var b = document.querySelector("button");
b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");
Ceci démontre 2 choses :
- le premier appel de
setAttribute()
ci-dessus montre la modification de la valeur de l'attributname
en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (Chrome, Edge, Firefox, Safari). - Pour définir la valeur d'un attribut booléen, tel que
disabled
, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée commetrue
(vraie). L'absence de l'attribut signifie que sa valeur estfalse
(fausse). En définissant la valeur de l'attributdisabled
sur la chaîne vide (""), nous définissonsdisabled
surtrue
, ce qui entraîne la désactivation du bouton.
Méthodes DOM traitant des attributs sur les éléments :
DOM Level 1 (le plus courant) | DOM Level 2 | DOM Level 1 traitant directement les nœuds Attr |
DOM Level 2 traitant directement les nœuds Attr |
---|---|---|---|
setAttribute (DOM 1) |
setAttributeNS |
setAttributeNode |
setAttributeNodeNS |
getAttribute (DOM 1) |
getAttributeNS |
getAttributeNode |
getAttributeNodeNS |
hasAttribute (DOM 2) |
hasAttributeNS |
- | - |
removeAttribute (DOM 1) |
removeAttributeNS |
removeAttributeNode |
- |
Spécifications
Compatibilité des navigateurs
Gecko notes
L'utilisation de setAttribute()
pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez Element.value
à la place de Element.setAttribute()
.