Element.
Définit la valeur d’un attribut HTML d’un élément, ou en ajoute un nouveau.
- Renvoie
undefined- Modifie l’original
- Oui
Exemple
#const link = document.querySelector('#next')
link.setAttribute('href', '/lecon-2')
link.setAttribute('title', 'Aller à la leçon 2')
console.log(link.getAttribute('href'))
console.log(link.getAttribute('title'))
console.log(link.getAttribute('target'))
console.log(link.hasAttribute('title'))Définition et utilisation
#La méthode setAttribute(nom, valeur) définit un attribut de l’élément. S’il existe déjà, sa valeur est écrasée, et sinon il est ajouté. La valeur est toujours convertie en chaîne.
Elle s’accompagne des méthodes getAttribute() (lecture, renvoie null quand l’attribut n’existe pas), hasAttribute(), removeAttribute() et toggleAttribute(). Elles sont particulièrement utiles avec les attributs ARIA, comme aria-expanded, et avec les attributs qui n’ont pas d’équivalent parmi les propriétés de l’élément.
Beaucoup d’attributs ont aussi une propriété correspondante, par ex. element.id, link.href ou input.value. Elles ne stockent pas toujours la même chose : getAttribute("href") renvoie le texte tel qu’écrit dans le HTML, alors que link.href renvoie l’adresse complète. L’attribut value d’un champ de formulaire est sa valeur initiale, alors que la propriété value est le texte actuellement saisi par l’utilisateur.
Les attributs booléens, comme disabled ou hidden, agissent par leur simple présence. Même setAttribute("disabled", "false") désactivera le bouton. Pour le réactiver, retirez l’attribut avec removeAttribute(), ou définissez la propriété button.disabled = false.
Syntaxe
#element.setAttribute(name, value)
element.getAttribute(name)
element.hasAttribute(name)
element.removeAttribute(name)
element.toggleAttribute(name)Paramètres
#name
chaîne
Le nom de l’attribut, par ex."href","alt"ou"aria-expanded".value
chaîne
La nouvelle valeur de l’attribut. Les autres types seront convertis en chaîne.
Plus d’exemples
#const send = document.querySelector('#send')
send.setAttribute('disabled', 'false')
console.log(send.disabled)
send.removeAttribute('disabled')
console.log(send.disabled)
send.toggleAttribute('disabled')
console.log(send.hasAttribute('disabled'))const nick = document.querySelector('#nick')
nick.value = 'Léa'
console.log(nick.value)
console.log(nick.getAttribute('value'))const menuButton = document.querySelector('#menu-btn')
menuButton.addEventListener('click', () => {
const expanded = menuButton.getAttribute('aria-expanded') === 'true'
menuButton.setAttribute('aria-expanded', String(!expanded))
console.log('aria-expanded:', menuButton.getAttribute('aria-expanded'))
})
menuButton.click()
menuButton.click()Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour les attributs
data-*, il est plus pratique d’utiliser la propriétédataset. - Un attribut booléen ne se désactive qu’avec
removeAttribute(). La valeur"false"signifie toujours que l’attribut est présent. - Pour les classes, utilisez
classList, et pour les styles,style, plutôt que d’écraser entièrement les attributsclassetstyle.
Entrées associées
#- HTMLElement.datasetUn objet avec les valeurs des attributs data-* d’un élément, pour lire et écrire vos propres données.
- Element.toggleAttribute()Ajoute un attribut s’il est absent, ou le retire s’il est présent. Particulièrement utile pour les attributs booléens, comme hidden ou disabled.
- Element.classListUn objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.
- HTMLElement.styleUn objet pour les styles écrits directement sur l’élément (inline), pour lire et modifier des propriétés CSS individuelles.
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- document.createElement()Crée un nouvel élément HTML avec le nom de balise donné, prêt à être inséré dans la page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.