Jak zmienić wartość atrybutu elementu HTML w JavaScript
Strony internetowe są zaprojektowane przy użyciu wielu języków programowania. Dwa takie języki programowania internetowego to HTML i JavaScript. HTML to język internetowy używany do budowania podstawowej struktury stron internetowych, tymczasem JavaScript służy do zawierania dynamicznych treści na stronach internetowych, aby je urzekają. Oba mają różne cechy wyróżniające, które wyróżniają. Jedną z takich funkcji jest HTML DOM. HTML DOM, który jest skrótem dla modelu obiektu dokumentu, pozwala JavaScriptowi zmienić zawartość elementów HTML.
W celu zmiany wartości atrybutu elementu HTML za pomocą JavaScript, HTML DOM podaje wiele metod. Korzystając z tych metod, możesz zmienić wartość atrybutu elementu HTML na następujące sposoby:
- Za pomocą metody getAttribute ()
- Za pomocą metody setAttribute ()
Omówmy szczegółowo każdy z nich.
Uzyskaj atrybut
Jak sama nazwa wskazuje, metodą getAttribute () jest wyodrębnienie bieżącej wartości atrybutu. Składnia metody getAttribute () jest następująca.
Składnia metody getAttribute ()
element.getAttribute (atrybutename);Zobaczmy przykład do dalszego zrozumienia.
Przykład
Załóżmy, że chcesz zmienić wartość atrybutu SRC elementu.
Powyższy kod pokazuje obraz przyrody.
Teraz chcemy zmienić ten obraz psa na obraz kota. Używamy następującego kodu.
Pełny przykład z wyjściem pokazano poniżej.
Obraz przyrody jest zmieniany na wizerunek śniegu
Ustaw atrybut
Aby ustawić atrybut na określonym elemencie, używamy metody setAttribute (). Aktualizuje wartość atrybutu istniejącego na elemencie lub ustawia nowy atrybut o nowej nazwie i wartości na elemencie, jeśli nie istnieje. Składnia tej metody jest następująca.
Składnia metody setAttribute ()
element.setAttribute (atrybutename, atrybutEValue);Zobaczmy przykład, aby lepiej zrozumieć metodę.
Przykład:
Najpierw tworzymy prosty przycisk z etykietą „Kliknij tutaj”.
Teraz musimy wybrać element i zrobimy to za pomocą jego identyfikatora.
var btn = dokument.getElementById („myBtn”);Teraz użyjemy metody setAttribute () do ustawiania nowych atrybutów.
Btn.setAttribute („klasa”, „click-btn”);Btn.setAttribute („enable”, „”);
Pełny kod wraz z wyjściem pokazano poniżej.
Wniosek
Aby zmienić wartość atrybutu elementu HTML HTML DOM, zapewnia dwie metody, które są getAttribute () i setAttribute (). GetAttribute () służy do wyodrębnienia bieżącej wartości atrybutu, podczas gdy setAttribute () służy do zmiany wartości atrybutu. W tym samouczku obie te metody są szczegółowo omówione wraz z odpowiednimi przykładami.