Element.
Dodaje atrybut, gdy go nie ma, albo usuwa, gdy jest. Najlepiej sprawdza się przy atrybutach logicznych, takich jak hidden czy disabled.
- Zwraca
true, jeśli po wywołaniu atrybut jest obecny, w przeciwnym raziefalse.- Zmienia oryginał
- Tak
Przykład
#const toggle = document.querySelector('#toggle')
const explanation = document.querySelector('#explanation')
toggle.addEventListener('click', () => {
const hidden = explanation.toggleAttribute('hidden')
toggle.textContent = hidden ? 'Pokaż wyjaśnienie' : 'Ukryj wyjaśnienie'
console.log('hidden:', hidden)
})
toggle.click()
toggle.click()Pierwsze kliknięcie usuwa atrybut hidden i pokazuje akapit, drugie dodaje go z powrotem. Kliknij przycisk w podglądzie, żeby przełączać wyjaśnienie dalej.
Definicja i zastosowanie
#Metoda toggleAttribute() przełącza obecność atrybutu: jeśli element go nie ma, dodaje go z pustą wartością, a jeśli ma, usuwa. Zwraca true, gdy po wywołaniu atrybut jest obecny, i false, gdy go nie ma.
Najbardziej przydaje się przy atrybutach logicznych, które działają przez samą obecność, np. hidden, disabled, required, readonly czy open. Wartość nie ma przy nich znaczenia, liczy się tylko to, czy atrybut jest wpisany. Działa też z własnymi atrybutami, np. data-active, które możesz wykorzystać w selektorach CSS.
Drugi argument, force, wymusza wynik: true zawsze dodaje atrybut (albo zostawia istniejący), a false zawsze go usuwa. Dzięki temu jednym wywołaniem ustawisz stan na podstawie warunku, bez pisania if z setAttribute() i removeAttribute(). Działa to podobnie jak classList.toggle(), tyle że dla atrybutów.
Składnia
#element.toggleAttribute(name)
element.toggleAttribute(name, force)Parametry
#name
napis
Nazwa atrybutu, np."hidden"albo"disabled".force
opcjonalny, boolean
truezawsze dodaje atrybut, afalsezawsze go usuwa.
Więcej przykładów
#const nick = document.querySelector('#nick')
const join = document.querySelector('#join')
function updateButton() {
join.toggleAttribute('disabled', nick.value.trim().length < 3)
console.log('Przycisk wyłączony:', join.disabled)
}
nick.addEventListener('input', updateButton)
updateButton()
nick.value = 'Ala'
nick.dispatchEvent(new Event('input'))Warunek decyduje o stanie przycisku bez żadnego if. Wpisz coś w pole w podglądzie, a przycisk włączy się lub wyłączy.
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)Dodany atrybut ma pustą wartość, bo przy atrybutach logicznych liczy się tylko jego obecność. Z force równym true atrybut, który już istnieje, po prostu zostaje.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do atrybutów logicznych (
hidden,disabled,required) używajtoggleAttribute()alboremoveAttribute().setAttribute("hidden", "false")nadal ukrywa element. - Drugi argument zamienia przełączanie w ustawianie:
toggleAttribute("disabled", !formValid)od razu nadaje właściwy stan. - Przy wielu atrybutach logicznych równie dobrze działają właściwości elementu, np.
button.disabled = truealbopanel.hidden = false.
Powiązane hasła
#- Element.setAttribute()Ustawia wartość atrybutu HTML elementu albo dodaje nowy atrybut.
- Element.classListObiekt do dodawania, usuwania, przełączania i sprawdzania klas CSS elementu.
- HTMLElement.datasetObiekt z wartościami atrybutów data-* elementu, do odczytu i zapisu własnych danych.
- EventTarget.addEventListener()Rejestruje funkcję wywoływaną za każdym razem, gdy na elemencie wystąpi zdarzenie, np. kliknięcie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.