CSS proměnné jsou velmi vítaným doplňkem jazyka, přestože jsou neuvěřitelně základní. Jistě bychom mohli použít SASS nebo stylus, ale jazyky by nikdy neměly počítat s tím, že se vývojáři budou spoléhat na rámce a sady nástrojů, aby dosáhli toho, co víme, že potřebujeme. A stejně jako každá jiná část webové stránky můžete získat a manipulovat s hodnotami proměnných CSS – pojďme se podívat, jak na to!
Nastavení a použití proměnných CSS
Tradiční metodou použití nativních proměnných CSS je jejich přidání do root :
:root {
--my-variable-name: #999999;
}
Jednoduchý. Pamatujte také, že proměnné CSS nejsou zdaleka tak výkonné jako proměnné v SASS, stylusu atd.
Získání hodnoty proměnné CSS
Chcete-li načíst hodnotu proměnné CSS v okně, použijte getComputedStyle a getPropertyValue :
getComputedStyle(document.documentElement)
.getPropertyValue('--my-variable-name'); // #999999
Vypočítaná hodnota proměnné se vrátí jako řetězec.
Nastavení hodnoty proměnné CSS
Chcete-li nastavit hodnotu proměnné CSS pomocí JavaScriptu, použijte setProperty na documentElement 's style vlastnost:
document.documentElement.style
.setProperty('--my-variable-name', 'pink');
Okamžitě uvidíte novou hodnotu použitou všude, kde je proměnná použita.
Předpokládal jsem potřebu nechutných hacků k provedení manipulace s proměnnými CSS pomocí JavaScriptu, takže jsem rád, že je to tak snadné, jak je popsáno výše!