Jak zmienić zmienne CSS za pomocą JavaScript?

Zmienne CSS są właściwościami niestandardowymi, które są generowane przez programistę i składają się z konkretnej nazwy i wartości. Zaletą korzystania z tych zmiennych jest to, że po ogłoszeniu można je używać w dowolnym miejscu w dokumencie i zapobiega pisaniu nadmiarowych wartości CSS.

Jednak czasami w niektórych scenariuszach, takich jak projektowanie responsywnej witryny lub pobieranie niektórych danych z bazy danych, potrzebujesz albo do pobrania lub aktualizacji wartości niektórych zmiennych CSS. Dlatego można to zrobić za pomocą metody JavaScript getCompomputedStyle () i metody setProperty ().

Poniżej pokazaliśmy za pomocą przykładu, jak zmienić zmienne CSS za pomocą JavaScript.

Jak zmienić zmienne CSS za pomocą JavaScript

W celu zrozumienia, jak zmienić zmienną CSS za pomocą JavaScript, rozważmy przykład.

Html

To jest akapit.

Zdobądź rodzinę czcionek
Ustaw rodzinę czcionek

Tworzymy

Element do zastosowania do niego pewnego stylizacji za pomocą zmiennych CSS, a następnie tworzenia dwóch przycisków, aby uzyskać i ustaw zmienne CSS za pomocą JavaScript.

CSS

Przede wszystkim tworzymy niektóre zmienne globalne w selektorze:.

:źródło
--Font Family: Times New Roman;
--Rozmiar czcionki: 30px;

Teraz, aby użyć tych zmiennych w akapicie, wykonaj poniższy fragment kodu.

P
kolor brązowy;
FONT-FAMILY: var (--font-family);
Font-size: var (-wielkości czcionki);

W powyższym kodzie podajemy akapit trochę koloru i używamy funkcji var (.

Teraz chcemy zaktualizować wartości zmiennych CSS za pomocą JavaScript. Oto jak to robisz. W poniższym kodzie zasadniczo pobieramy, a także aktualizujemy wartość zmiennej rodziny.

JS

var store = dokument.querySelelect („: root”);
funkcja getFontfamily ()
var value = getComputedStyle (sklep);
Alert („początkowa rodzina czcionek:”+ wartość.getPropertyValue ('-Font-Family'));

funkcja setfontfamily ()
sklep.styl.setProperty („-font-family”, „verdana”);

W powyższym kodzie tworzymy zmienną według nazwy „przechowuj”, aby przechowywać wszystkie zmienne CSS zadeklarowane w selektorze: metodę QuerySelelect.

Następnie generujemy funkcję „getFontfamily”, aby pobrać zmienne, które początkowo zostały zapisane w zmiennej „przechowuj” za pomocą metody getComputedStyle (), a następnie używamy funkcji alert (), aby pokazać początkową wartość zmiennej odpowiadającej temu Rodzina czcionek.

Na koniec ponownie generujemy inną funkcję „setFontFamily ()”, aby ustawić nową wartość zmiennej -fonton -a -family za pomocą metody setProperty ().

Wyjście

Tak początkowo wygląda nasza strona internetowa.

Kliknij przycisk Get, aby pobrać wartość oryginalnej rodziny czcionki.

Po kliknięciu.

Początkowa rodzina czcionki to czas na nowy Rzymian.

Aby zaktualizować radość czcionki, kliknij przycisk Ustaw.

Po kliknięciu przycisku.

Zmienna -odfontowa została pomyślnie zaktualizowana do „Verdana”.

Wniosek

W celu pobierania lub aktualizacji wartości niektórych zmiennych CSS za pośrednictwem JavaScript są dostępne dwie metody. Pierwsza to metoda getComputStyle () do pobrania wartości zmiennej, w międzyczasie aktualizacji wartości zmiennej za pomocą metody setProperty (). Zmiana zmiennych CSS za pośrednictwem JavaScript jest przydatna w scenariuszach, takich jak projektowanie responsywnej strony internetowej lub pobieranie niektórych danych z bazy danych. W tym samouczku omówiono, jak zmienić te zmienne za pomocą JavaScript za pomocą odpowiedniego przykładu.