Access-Update CSS Variables with JavaScript
In this post, we will give you information about Access-Update CSS Variables with JavaScript. Here we will give you detail about Access-Update CSS Variables with JavaScriptAnd how to use it also give you a demo for it if it is necessary.
CSS variables (or custom properties) are powerful additions to CSS. Among other features, they allow you to live to update the DOM in JavaScript. Dynamically updating CSS variables will make it easier to create advanced requirements such as dynamic and live themes.
Let’s see, by a simple example, how we can dynamically update the colors of a page.
First, let’s create an HTML page with the following code:
<buttononclick="changeDocColor()">Change color</button>
The setProperty()
the method will accept any valid CSS code, the value string may include the var() function as well. That would allow us to predefine our color before using it, in order to perhaps reuse it elsewhere?
:root{--bg-color:blue;}
:root
is a CSS pseudo-class that selects (or matches) the root element of a document. In the case of HTML, :root
refers to the <html>
element i.e using it is equivalent to using the html
selector but has a higher specificity.
By adding the CSS variables inside the :root
selector we make them available in the global scope of the document so they are accessible from any other element.
We use --
to define a CSS custom property.
functionchangeBackgroundColor(){elem.style.setProperty('--bg-color','red');}
Let’s understand the code:
4 — grab footer element5 — grab NodeList of all inputs on the page7 — input CHANGE EventListener8 — input MOUSEMOVE EventListener(updates dynamic margin on slide)10 — fn to set the value of the desired CSS var(note we add px to the margin var on line 14)
Hope this code and post will help you implement Access-Update CSS Variables with JavaScript. if you need any help or any feedback give it in the comment section or you have a good idea about this post you can give it in the comment section. Your comment will help us to help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs