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:
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 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.
-- to define a CSS custom property.
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)