A CSS egyéni tulajdonságok, más néven CSS-változók, olyan egyéni tulajdonságokat képviselnek, amelyek deklarálhatók és meghívhatók a CSS-ben.
Nyilvánítson egyéni tulajdonságot a CSS-ben
Egyéni tulajdonság deklarálásához a CSS-ben a --szintaxist kell használnia :
:root { --colorPrimary: hsla(360, 100%, 74%, 0.6); }Figyelje meg az :rootál-osztály választót - a változókat globálisan deklarálhatjuk annak használatával. Kijelölhetjük őket más szelektorok használatával is, és akkor ezekben a hatókörbe kerülnek.
.theme-dark { --colorPrimary: hsla(360, 100%, 24%, 0.6); }Használjon egyéni tulajdonságot a CSS-ben
CSS egyéni tulajdonság használatához a CSS-ben a következő var()funkciót használhatja:
:root { --colorPrimary: tomato; } .theme-dark { --colorPrimary: lime; } body { background-color: var(--colorPrimary); }Ebben az esetben bodya háttérszíne tomato, de body.theme-darka lime.
Használjon egyedi tulajdonságokat egységek nélkül
A CSS egyéni tulajdonságai egységek nélkül deklarálhatók, ha a calc()funkcióval együtt használják őket .
:root { --spacing: 2; } .container { padding: var(--spacing) px; /*Doesn't Work ?*/ padding: calc(var(--spacing) * 1rem); /*Will output 2rem ?*/ }Használjon egyedi tulajdonságokat a JavaScript használatával
Egyéni tulajdonság megszerzéséhez a következőket használhatjuk:
getComputedStyle(element).getPropertyValue("--my-var"); // Or if inline element.style.getPropertyValue("--my-var");Az egyéni tulajdonság értékének frissítése:
element.style.setProperty("--my-var", newVal);Példa értékek lekérésére és cseréjére:
A következő példában a dat.gui vezérlőkönyvtárat használjuk a --scenePerspective, --cubeRotateY és --cubeRotateX egyéni tulajdonságok értékének megváltoztatására. Ez a módszer megkönnyíti az új stílus alkalmazását, mivel nem kell inline stílust alkalmazni minden egyes DOM elemre.
Köszönöm, hogy elolvasta!
Erőforrások
Egyéni tulajdonságok meghatározása: a - * tulajdonságcsalád
Egyéni tulajdonságok: CSS-változók - MDN
var () - MDN
CSS egyéni tulajdonságok (változók) használata - MDN
Több cikkemet elolvashatja a blogomon.