Element.
Ustawia wartość atrybutu HTML elementu albo dodaje nowy atrybut.
- Zwraca
undefined- Zmienia oryginał
- Tak
Przykład
#const link = document.querySelector('#next')
link.setAttribute('href', '/lekcja-2')
link.setAttribute('title', 'Przejdź do lekcji 2')
console.log(link.getAttribute('href'))
console.log(link.getAttribute('title'))
console.log(link.getAttribute('target'))
console.log(link.hasAttribute('title'))Definicja i zastosowanie
#Metoda setAttribute(nazwa, wartość) ustawia atrybut elementu. Jeśli atrybut już istnieje, jego wartość zostanie nadpisana, a jeśli nie, zostanie dodany. Wartość zawsze jest zamieniana na napis.
Towarzyszą jej metody getAttribute() (odczyt, zwraca null, gdy atrybutu nie ma), hasAttribute(), removeAttribute() i toggleAttribute(). Przydają się szczególnie przy atrybutach ARIA, takich jak aria-expanded, i przy atrybutach, które nie mają odpowiednika we właściwościach elementu.
Wiele atrybutów ma też odpowiadające im właściwości, np. element.id, link.href czy input.value. Nie zawsze przechowują to samo: getAttribute("href") zwraca tekst wpisany w HTML, a link.href pełny adres. Atrybut value pola formularza to wartość początkowa, a właściwość value to tekst aktualnie wpisany przez użytkownika.
Atrybuty logiczne, takie jak disabled czy hidden, działają przez samą obecność. Nawet setAttribute("disabled", "false") wyłączy przycisk. Żeby go włączyć, usuń atrybut przez removeAttribute() albo ustaw właściwość button.disabled = false.
Składnia
#element.setAttribute(name, value)
element.getAttribute(name)
element.hasAttribute(name)
element.removeAttribute(name)
element.toggleAttribute(name)Parametry
#name
napis
Nazwa atrybutu, np."href","alt"albo"aria-expanded".value
napis
Nowa wartość atrybutu. Inne typy zostaną zamienione na napis.
Więcej przykładów
#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 = 'Ania'
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()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
data-*wygodniej używać właściwościdataset. - Atrybut logiczny wyłączysz tylko przez
removeAttribute(). Wartość"false"nadal oznacza, że atrybut jest obecny. - Do klas używaj
classList, a do stylówstyle, zamiast nadpisywać w całości atrybutyclassistyle.
Powiązane hasła
#- HTMLElement.datasetObiekt z wartościami atrybutów data-* elementu, do odczytu i zapisu własnych danych.
- Element.toggleAttribute()Dodaje atrybut, gdy go nie ma, albo usuwa, gdy jest. Najlepiej sprawdza się przy atrybutach logicznych, takich jak hidden czy disabled.
- Element.classListObiekt do dodawania, usuwania, przełączania i sprawdzania klas CSS elementu.
- HTMLElement.styleObiekt stylów wpisanych bezpośrednio w element (inline), do odczytu i zmiany pojedynczych właściwości CSS.
- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- document.createElement()Tworzy nowy element HTML o podanej nazwie znacznika, gotowy do wstawienia na stronę.
Widzisz błąd albo brakuje przykładu? Napisz do nas.