Element.
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.
- Renvoie
truesi l’attribut est présent après l’appel, sinonfalse.- Modifie l’original
- Oui
Exemple
#const toggle = document.querySelector('#toggle')
const explanation = document.querySelector('#explanation')
toggle.addEventListener('click', () => {
const hidden = explanation.toggleAttribute('hidden')
toggle.textContent = hidden ? 'Afficher l’explication' : 'Masquer l’explication'
console.log('hidden:', hidden)
})
toggle.click()
toggle.click()Le premier clic retire l’attribut hidden et affiche le paragraphe, le second le rajoute. Cliquez sur le bouton dans l’aperçu pour continuer à basculer l’explication.
Définition et utilisation
#La méthode toggleAttribute() bascule la présence d’un attribut : si l’élément ne l’a pas, elle l’ajoute avec une valeur vide, et s’il l’a, elle le retire. Elle renvoie true si l’attribut est présent après l’appel, et false sinon.
Elle est surtout utile avec les attributs booléens, qui agissent par leur simple présence, par ex. hidden, disabled, required, readonly ou open. Leur valeur n’a pas d’importance, seule compte la présence de l’attribut. Elle fonctionne aussi avec vos propres attributs, par ex. data-active, que vous pouvez utiliser dans des sélecteurs CSS.
Le second argument, force, impose le résultat : true ajoute toujours l’attribut (ou laisse celui qui existe déjà), et false le retire toujours. Cela permet, en un seul appel, de définir l’état selon une condition, sans écrire de if avec setAttribute() et removeAttribute(). Cela fonctionne de façon similaire à classList.toggle(), mais pour les attributs.
Syntaxe
#element.toggleAttribute(name)
element.toggleAttribute(name, force)Paramètres
#name
chaîne
Le nom de l’attribut, par ex."hidden"ou"disabled".force
booléen, optionnel
trueajoute toujours l’attribut, etfalsele retire toujours.
Plus d’exemples
#const nick = document.querySelector('#nick')
const join = document.querySelector('#join')
function updateButton() {
join.toggleAttribute('disabled', nick.value.trim().length < 3)
console.log('Bouton désactivé :', join.disabled)
}
nick.addEventListener('input', updateButton)
updateButton()
nick.value = 'Léa'
nick.dispatchEvent(new Event('input'))La condition décide de l’état du bouton sans aucun if. Tapez quelque chose dans le champ de l’aperçu, et le bouton s’activera ou se désactivera.
const faq = document.querySelector('#faq')
console.log(faq.toggleAttribute('open'))
console.log(JSON.stringify(faq.getAttribute('open')))
console.log(faq.open)
console.log(faq.toggleAttribute('open', true))
console.log(faq.toggleAttribute('open', false), faq.open)L’attribut ajouté a une valeur vide, car pour les attributs booléens, seule sa présence compte. Avec force à true, un attribut déjà présent reste simplement tel quel.
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 booléens (
hidden,disabled,required), utiliseztoggleAttribute()ouremoveAttribute().setAttribute("hidden", "false")cache quand même l’élément. - Le second argument transforme le basculement en affectation directe :
toggleAttribute("disabled", !formValid)donne immédiatement le bon état. - Pour de nombreux attributs booléens, les propriétés de l’élément fonctionnent tout aussi bien, par ex.
button.disabled = trueoupanel.hidden = false.
Entrées associées
#- Element.setAttribute()Définit la valeur d’un attribut HTML d’un élément, ou en ajoute un nouveau.
- Element.classListUn objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.
- HTMLElement.datasetUn objet avec les valeurs des attributs data-* d’un élément, pour lire et écrire vos propres données.
- EventTarget.addEventListener()Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.