Accueil >JavaScript >Référence JS – méthodes et objets >Element.setAttribute()

Element.setAttribute()

element.setAttribute(name, value)

Donne à l’attribut la valeur indiquée (convertie en texte), ou l’ajoute s’il manque.

L’exemple travaille avec le code HTML placé au-dessus du code JavaScript.

Paramètres

  • name – nom de l’attribut.
  • value – nouvelle valeur (toujours enregistrée comme texte).

Valeur de retour

undefined.

Exemples

<img id="photo" src="/small.jpg" alt="">

const photo = document.getElementById('photo');
photo.setAttribute('alt', 'Le Mont-Saint-Michel en hiver');
photo.setAttribute('loading', 'lazy');
photo.setAttribute('width', 640);
photo.setAttribute('data-large', '/large.jpg');
console.log(photo.outerHTML);
photo.setAttribute('aria-hidden', false);
console.log(typeof photo.getAttribute('width'), photo.getAttribute('aria-hidden'));

Résultat :

<img id="photo" src="/small.jpg" alt="Le Mont-Saint-Michel en hiver" loading="lazy" width="640" data-large="/large.jpg">
string false

Points d’attention

  • La valeur false est enregistrée comme texte « false » – les attributs booléens (disabled, hidden) se désactivent en les supprimant : removeAttribute() ou toggleAttribute().
  • N’ajoutez pas de gestionnaire d’événement avec setAttribute('onclick', …), utilisez addEventListener().
  • Vérifiez un attribut issu d’un texte saisi par l’utilisateur dans href ou src (adresse javascript:).

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 1, Firefox 1, Safari 1 ; absent de Node.js (API du navigateur). État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
Element.getAttribute()
Element.removeAttribute()
Element.toggleAttribute()