Atrybuty tagów jako właściwości w JavaScript
Nauczmy się teraz pobierać atrybuty tagów. Obowiązuje tu następująca zasada: każdemu atrybutowi tagu odpowiada właściwość DOM elementu o tej samej nazwie.
Spójrzmy na przykład. Załóżmy, że mamy taki tag:
html<input id="elem" type="text">
Pobierzmy referencję do naszego elementu do zmiennej:
javascriptlet elem = document.querySelector('#elem');
Wypiszmy wartości potrzebnych nam atrybutów:
javascriptconsole.log(elem.id); // wypisze 'elem'
console.log(elem.type); // wypisze 'text'
A teraz dla przykładu zmieńmy wartość atrybutu:
javascriptelem.type = 'submit';
Dany jest następujący input:
html<input id="elem" type="email">
Dany jest również przycisk. Po naciśnięciu przycisku wypisz
na ekran zawartość atrybutu type
powyższego inputa.
Dany jest następujący input:
html<input id="elem" type="email">
Dany jest również przycisk. Po naciśnięciu przycisku zapisz
w atrybucie type wartość submit.
Załóżmy, że masz link w postaci tagu a,
przycisk i akapit. Po naciśnięciu przycisku wypisz
w akapicie zawartość atrybutu href linku.
Załóżmy, że masz link i przycisk. Po naciśnięciu
przycisku dodaj na końcu tekstu linku
zawartość jego atrybutu href w okrągłych
nawiasach.
Załóżmy, że masz obrazek. Umieść go
na stronie za pomocą tagu img.
Załóżmy, że dane są również przycisk i akapit. Spraw,
aby po kliknięciu przycisku w akapit został zapisany
ścieżka do obrazka z jego atrybutu src.
Dany jest obrazek w tagu img i przycisk.
Po naciśnięciu przycisku w atrybut width
zapisz wartość 300.
Dany jest obrazek w tagu img i przycisk.
Załóżmy, że w atrybucie width ustawiona jest pewna
szerokość. Zrób przycisk, po naciśnięciu którego
szerokość obrazka będzie zwiększana 2
razy.
Załóżmy, że masz dwa obrazki. Zrób na
stronie tag img i dwa przyciski. Po
naciśnięciu pierwszego przycisku zapisz w atrybucie
src ścieżkę do pierwszego obrazka, a po naciśnięciu
drugiego - ścieżkę do drugiego obrazka.