Metoda setAttribute() w JavaScript

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

setAttribute() to metoda DOM używana do ustawiania lub zmiany wartości atrybutu elementu HTML z poziomu JavaScript.

Najczęściej stosuje się ją po wcześniejszym pobraniu elementu, np. za pomocą document.getElementById().

Składnia

element.setAttribute(nazwaAtrybutu, nowaWartosc);
  • nazwaAtrybutu — nazwa atrybutu HTML, np. src, href, alt, class, type
  • nowaWartosc — wartość, która ma zostać przypisana do atrybutu

Przykład

<img id='obrazek' src='stary.jpg' alt='Stary obraz'>

<script>
const img = document.getElementById('obrazek');
img.setAttribute('src', 'nowy.jpg');
img.setAttribute('alt', 'Nowy obraz');
</script>

W tym przykładzie JavaScript zmienia atrybut src, czyli źródło obrazka, oraz atrybut alt.

Różnica między setAttribute() a getAttribute()

  • setAttribute() — ustawia lub zmienia wartość atrybutu
  • getAttribute() — odczytuje wartość atrybutu
link.setAttribute('href', 'https://example.com');
const adres = link.getAttribute('href');

Typowy błąd egzaminacyjny

Do zmiany atrybutu nie służy innerHTML. Pole innerHTML zmienia zawartość HTML wewnątrz elementu, a nie jego atrybuty.

Poprawna metoda do modyfikacji atrybutu to:

element.setAttribute('nazwa', 'wartosc');