Jak zmienić CSS z JavaScript

Język HTML jest po prostu językiem znaczników, który nie może wykonywać żadnych funkcji i nie może wykonywać kodów na podstawie różnych zdarzeń dynamicznych. W tym celu musimy użyć JavaScript do zmiany stylu CSS dowolnego elementu HTML, ponieważ HTML nie może tego zrobić samodzielnie.

Może istnieć różne powody, dla których musimy zmienić CSS i manipulować za pomocą elementów HTML, może to być dynamiczne załadowanie arkusza stylów, zmienić kolor przycisku, gdy użytkownik go kliknie, lub pisać CSS w JavaScript. Wszystkie te zmiany można dokonać za pośrednictwem JavaScript. W tym artykule zobaczymy różne sposoby dostępu do CSS z JavaScript i jego zmianą.

Używanie JavaScript do zmiany CSS

Istnieją różne metody w JavaScript, które pomagają w dostępie do elementów HTML i przez to możemy manipulować wartościami CSS. Niektóre z tych metod zostały wyjaśnione poniżej wraz z przykładami.

Używanie getElementsByClassName ()

Metoda getElementByClassName () przyjmuje ciąg jako nazwę klasy i przeszukuje cały dokument HTML i zwraca elementy o tej samej nazwie klasy. Po zidentyfikowaniu nazwy klasy możemy zmienić właściwości CSS, jak pokazano poniżej w przykładzie:

HTML:

Pole wprowadzania:


Zmień granicę

JavaScript:

Tutaj przeszukaliśmy element HTML według nazwy klasy i zmieniliśmy właściwości CSS tych elementów za pomocą styl.kolor tła I styl.kolor ramki.

Wyjście:

Za pomocą getElementById ()

Inną metodą użycia jest getElementById () który wyszukuje wszystkie elementy HTML z podobnymi identyfikatorami i wykonuje na nich przypisaną funkcję. Zastosowane są głównie różne Divy, które są przypisywane identyfikatorami, a te identyfikatory są przeszukiwane za pomocą tej metody. Jest to najczęściej stosowane metody programistów, poniżej jest przykład:

HTML:

Pole wprowadzania:


Zmień granicę

JavaScript:

Tutaj zastosowaliśmy tę metodę do wyszukiwania wszystkich elementów za pomocą ich identyfikatora i zmiany właściwości CSS za pomocą stylu.

Wyjście:

Za pomocą QuerySelector ()

Inną metodą, która działa tak jak powyższe dwie metody, jest QuerySelelect () Metoda, która może wyszukiwać według nazwy klasy, nazwy identyfikatora, a nawet według tagów HTML, ale zwraca tylko pierwszy wspomniany element HTML do wyszukiwania. Poniżej znajdują się sposoby korzystania z QuerySelector:

dokument.QuerySelelect („# id of Div”);
dokument.querySelelector (". Nazwa klasy CSS ”);
dokument.querySelelect („tag html jak: div>”);

Poniżej znajduje się przykład QuerySelelect () i tego, jak można go używać z nazwą klasy, identyfikatorami itp

HTML:

Pole wprowadzania:


Zmień granicę

JavaScript:

Tutaj zastosowaliśmy metodę QuerySelelect () do wyszukiwania klas i identyfikatorów DIVS oraz zmienił ich właściwości CSS.

Wyjście:

Wniosek

Istnieją różne powody zmiany CSS, a najlepszym sposobem na to jest użycie JavaScript, ponieważ może łatwo uzyskać dostęp do elementów HTML i zmienić ich właściwości CSS. W tym artykule omówiliśmy, jak zmienić CSS za pomocą JavaScript, różne metody podane w JavaScript w celu zmiany wartości elementów HTML. Ułatwiają one prace programistów i zwiększają dynamikę strony internetowej. Za pomocą tych metod możemy łatwo zmieniać kolory przycisków, kolory tła, kolory czcionek itp.