Jak zdobyć i zmodyfikować atrybuty, klasy i style elementu za pośrednictwem JavaScript

Często strony internetowe muszą zmienić swoje elementy lub jak wyglądają ich elementy w zależności od działań lub wyborów użytkownika. Zmiana elementów, atrybutów, klas i stylów strony internetowej odbywa się z pomocą Dom (Model obiektu dokumentu). DOM został ustawiony jako standard, w jaki sposób każda przeglądarka interpretuje stronę internetową HTML i jak będzie dostępna do różnych elementów na stronie internetowej W3C (konsorcjum internetowe na całym świecie).

JavaScript oddziałuje również z elementami strony HTML za pomocą DOM, aw tym poście nauczymy się, jak uzyskać dostęp do elementów HTML z JavaScript i jak zmienić ich atrybuty, klasy i styl za pomocą JavaScript.

Najpierw utwórzmy stronę HTML z różnymi elementami, używając następujących wierszy kodu:

Zmień mój styl

Zmień mój atrybut

Zmień moją klasę

Te wiersze kodu dadzą nam następującą stronę internetową:

Jak zdobyć elementy w JavaScript

Zanim sprawdzimy, jak zmienić elementy za pomocą JavaScript, najpierw musimy wiedzieć, jak zdobyć elementy w JavaScript. Aby uzyskać odniesienie elementu, możemy użyć jednej z różnych funkcji, które są dostarczane przez JavaScript, takie jak:

• getElementById ()
• getElementByClassName ()
• GetElementByName ()
• getElementByTagname ()
• getElementBytagnamens ()

Wszystkie są dość łatwe w użyciu i rozumieją po imieniu. Załóżmy, że mamy element w naszym HTML z identyfikatorem „XYZ”, Aby uzyskać dostęp do danych tego elementu, użylibyśmy następującego wiersza w pliku JavaScript lub znaczniku skryptu:

var obj = dokument.getElementById („xyz”);

Podobnie, jeśli próbujemy uzyskać dostęp do elementu za pomocą jego klas nazwy, użylibyśmy funkcji getElementByClassName ().

Zmiana stylu elementu

Patrząc na nasz plik HTML, wiemy, że div z napisem „Zmień mój styl” ma identyfikator „Zmień styl”, Więc dostęp do tego z następującym wierszem:

var cs = dokument.getElementById („Changestyle”);

Teraz, że mamy nasze odniesienie do elementów w zmiennej „CS”, możemy uzyskać dostęp do jej funkcji stylu za pomocą Operator kropki I stamtąd możemy zmienić jego różne wartości stylu. Na przykład, gdybyśmy zmienili kolor tła na żółty, użylibyśmy linii:

Cs.styl.tło Color = „żółty”;

Po uruchomieniu pliku HTML zobaczysz następujące dane wyjściowe:

Możesz zobaczyć również na powyższym zdjęciu, że udało nam się zmienić styl elementu.

Zmień klasę elementu za pomocą JavaScript

Mamy element z ID „Changeclass”, który ma klasę „myClass”, aby zmienić klasę tego elementu Pierwszą rzeczą, którą musimy zrobić, jest odwołanie się do tego elementu w JavaScript za pomocą następującego wiersza kodu:

var cc = dokument.getElementById („ChangeClass”);

Teraz, gdy mamy odniesienie elementu w zmiennej „CC„Możemy uzyskać dostęp do jego atrybutu klas za pomocą klasa () funkcjonować. Aby dodać nową klasę „NewClass” do tej samej zmiennej, możemy użyć następującego wiersza kodu:

CC.Lista klas.Dodaj („newClass”);

Jeśli otworzysz konsolę programisty i sprawdź atrybut klasy, znajdziesz następujący wynik:

Jak widać, byłeś w stanie dodać inną klasę do atrybutu klasowego elementu za pomocą JavaScript. Jeśli chcesz usunąć już istniejącą klasę z listy, możesz użyć następującego wiersza kodu:

CC.Lista klas.usuń („myClass”);

Po wykonaniu powyższej linii zobaczysz następujące wyniki w konsoli dewelopera:

I proszę bardzo; Byłeś w stanie usunąć klasę z listy klas elementu za pomocą JavaScript.

Zmiana atrybutu elementu

JavaScript ma funkcję o nazwie „setAttribute”, Który pozwala użytkownikowi zmienić wartość dowolnego atrybutu elementu, czy może to być atrybut„ klasa ”, czy atrybut„ identyfikator ”. Na przykład, aby zmienić klasę elementu, najpierw wskażmy element, który mówi „Zmień mój atrybut, używamy następującego wiersza kodu:

var ca = dokument.getElementById („ChangEattr”);

A następnie możemy użyć funkcji „setAttribute”, takiej jak:

ca.setAttribute („klasa”, „hello”);

Teraz możemy zaobserwować tę zmianę w narzędziach programistów, takich jak

Możemy nawet przypisać nasze własne atrybuty do elementu za pomocą funkcji, na przykład, jeśli chcemy atrybut „newattr”Do tego elementu o wartości„zrobione”, Możemy to dodać za pomocą następującego wiersza kodu:

ca.setAttribute („newAttr”, „Done”);

A jeśli obserwujemy element w konsoli dewelopera, możemy zobaczyć następujący wynik:

Jak jest jasne na powyższym obrazku, byliśmy w stanie dodać nowy atrybut o nazwie „newattr„Do naszego elementu za pomocą JavaScript.

Wniosek

JavaScript zapewnia różne funkcje i funkcje, które pomagają nam modyfikować różne właściwości i atrybuty elementu HTML. Wszystkie te zmiany elementu HTML są wykonywane za pomocą modelu obiektu Dokument (DOM), gdy JavaScript oddziałuje z DOM, aby zmienić właściwości elementu. Dzisiaj w tym poście dowiedzieliśmy się, w jaki sposób możemy używać JavaScript i uzyskać odniesienie do elementu, a następnie z pomocą tego odniesienia, w jaki sposób możemy zmienić styl tego elementu, klasę elementu i jak możemy zmienić atrybuty elementu. Wraz z tymi zmianami dowiedzieliśmy się nawet, jak możemy dodać nowy atrybut naszego wyboru do elementu HTML.