Menu
#foo{font-size:14px;}
Now #foo has 14px font size
#foo{font-size:$-2px} // Hypothetical code
Now #foo has 12px font size. (14px - 2px)
Is this possible by any means? To dynamically change the value of a selector.
818
CSS Change Variables With JavaScript 1 Change Variables With JavaScript. CSS variables have access to the DOM, which means that you can change them with... 2 Browser Support. The numbers in the table specify the first browser version that fully supports the var () function. 3 CSS var () Function. More ...
Think of the acronym DRY — Don’t Repeat Yourself. By using variables in CSS, you can localize values and simplify initial development, iterative testing, and later maintenance all in one go. The value of variables (see what I did there?) is this: set it once and it’s set everywhere; change it once and it’s changed everywhere.
Simply put, you can access CSS variables — both get and set — from JavaScript. To get a specific variable’s value, say, --my-bg-colour, retrieve the document’s computed style object, get the property value from that, and put it into a JavaScript variable. The trim () function isn’t required, but does snip off any whitespace from the value.
Every CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types — values and units — that CSS properties accept. Below is an overview of most of these data types.
You can use rem which will refer to the global font-size.
:root
{
font-size : 14px;
}
#foo
{
font-size : calc(1rem - 2px);
}<div>
I am a 14px text according to the root font-size
</div>
<div id="foo">
I am a 12 pixel text according to the rem font-size
</div>EXPLANATION
The rem will refer to the global css. So when processing (1rem - 2px), this is actually (14px - 2px).
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
