CSS Verander Veranderlikes Met JavaScript
Verander veranderlikes met JavaScript
CSS-veranderlikes het toegang tot die DOM, wat beteken dat jy dit met JavaScript kan verander.
Hier is 'n voorbeeld van hoe jy 'n skrif kan skep om die --blue veranderlike te vertoon en te verander van die voorbeeld wat in die vorige bladsye gebruik is. Vir nou, moenie bekommerd wees as jy nie vertroud is met JavaScript nie. Jy kan meer leer oor JavaScript in ons JavaScript-tutoriaal :
Voorbeeld
<script>
// Get the root element
var r = document.querySelector(':root');
// Create a function for getting a variable value
function
myFunction_get() {
// Get the styles (properties and values) for the
root
var rs = getComputedStyle(r);
// Alert the value of
the --blue variable
alert("The value of --blue is: " +
rs.getPropertyValue('--blue'));
}
// Create a function for setting a
variable value
function myFunction_set() {
// Set the value of
variable --blue to another value (in this case "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die
var()funksie ten volle ondersteun.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Funksie
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |