Méthode setAttribute() de l'élément DOM HTML

Définition et utilisation

setAttribute() La méthode ajoute l'attribut spécifié et lui assigne une valeur spécifiée.

Si l'attribut spécifié existe déjà, il ne faudra que définir ou modifier la valeur.

Attention :L'objet HTMLElement du document HTML définit également les attributs JavaScript correspondant à toutes les propriétés HTML standard. Par conséquent, vous n'avez besoin d'utiliser cette méthode que lorsque vous devez définir des attributs non standard.

Veuillez également consulter :

Manuel de référence :

Méthode getAttribute()

Méthode removeAttribute()

Méthode hasAttribute()

Méthode hasAttributes()

Méthode getAttributeNode()

Méthode setAttributeNode()

Méthode removeAttributeNode()

Tutoriel :

Attributs HTML

Exemple

Exemple 1

Ajouter l'attribut class à l'élément :

element.setAttribute("class", "democlass");

Avant l'ajout :

Objet Element

Après l'ajout :

Objet Element

Essayer par vous-même

Exemple 2

Changer le champ d'entrée en bouton :

myInput.setAttribute("type", "button");

Essayer par vous-même

Avant la modification :

Après la modification :

Exemple 3

Ajouter l'attribut href à l'élément <a> :

myAnchor.setAttribute("href", "");

Essayer par vous-même

Avant l'ajout :

Visitez codew3c.com

Après l'ajout :

Visitez codew3c.com

Exemple 4

Modifier la valeur de l'attribut target en "_self" :

if (element.hasAttribute("target")) {      
  element.setAttribute("target", "_self");
}

Essayer par vous-même

Syntaxe

element.setAttribute(name, value)

Paramètre

Paramètre Description
name Obligatoire. Nom de l'attribut.
value Obligatoire. Nouvelle valeur de l'attribut.

Valeur de retour

Aucun.

Lancer

Exception Description
INVALID_CHARACTER_ERR Paramètre name Les caractères interdits dans les noms d'attributs HTML ou XML.
NO_MODIFICATION_ALLOWED_ERR L'élément courant est en lecture seule, et il n'est pas autorisé de modifier ses propriétés.

Remarque

Il est possible d'ajouter à l'élément une propriété style avec une valeur, mais il est déconseillé de le faire, car cela couvrira d'autres propriétés de la propriété style.

Veuillez utiliser les propriétés de l'objet Style :

Inconvénient :

element.setAttribute("style", "background-color:red;");

Avantage :

element.style.backgroundColor = "red";

Support du navigateur

element.setAttribute() C'est une caractéristique de DOM Level 1 (1998).

Tous les navigateurs le supportent complètement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support