Ustaw właściwość CSS w JavaScript

JavaScript jest jednym z podstawowych języków i technologii sieci World Web. Jest to dynamicznie wykonywający język programowania. CSS to język używany do kontrolowania stylizacji dokumentów napisanych w językach znaczników, takich jak HTML i XHTML.

Właściwości CSS można zastosować do kodu zapisanego w JavaScript w dokumencie HTML, uzyskując dostęp do elementu, w którym właściwość musi być zastosowana za pośrednictwem JavaScript i bezpośrednio zastosowanie właściwości CSS na niej.

Ustawienie właściwości CSS w JavaScript

Weźmy przykład prostego kodu HTML, aby sformatować dokument JavaScript:

Kliknij OK, aby zmienić mój kolor

OK

W powyższym fragmencie kodu jest nagłówek, który przypisaliśmy identyfikator „test". Poniżej utworzyliśmy przycisk „OK”Za pośrednictwem znacznika przycisku i zadeklarowane„na kliknięcie„Funkcja tego przycisku. To określa, że ​​kiedy „OK”Przycisk zostanie kliknięty,„Func ()„Funkcja JavaScript zostanie wywołana, a właściwość CSS zdefiniowana w tej funkcji zostanie zaimplementowana do tekstu zapisanego w HTML.

Poniżej znajduje się funkcja JavaScript, dzięki której powyższy kod HTML dynamicznie można wykonywać:

funkcja func ()
var y = dokument.getElementById („tekst”);
y.styl.color = „czerwony”;

Powyższy fragment kodu ma funkcję o nazwie „Func ()„W którym zmienna”y”Jest inicjowany i„GetElementById„Metoda jest zadeklarowana w odniesieniu do„tekst„Identyfikator, który ma tekst (treść). Następnie istnieje właściwość CSS, aby zmienić kolor tekstu na czerwony.

Wyświetli to tekst w interfejsie wyjściowym, który po kliknięciu przycisku OK zmieni kolor tekstu na czerwony:

W ten sposób możemy ustawić właściwości CSS w JavaScript.

Wniosek

Możemy ustawić właściwości CSS w elemencie w JavaScript, najpierw uzyskując dostęp do identyfikatora, klasy lub atrybutu tego elementu za pomocą odpowiedniej metody GET. Na przykład w powyższym poście zastosowaliśmy „GetElementById" metoda. Następnie po prostu zdefiniuj właściwość CSS do zastosowania do tego elementu. W tym artykule dobrze wyjaśniono, jak ustawić właściwości CSS w JavaScript.