How to set the CSS3 var variable in the HTML tag and JS

Most people do not understand the knowledge points of this article, "how to set CSS3 var variables in HTML tags and JS". So the editor summarizes the following contents, detailed contents, clear steps, and a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to set CSS3 var variables in HTML tags and JS" article.

1. Set the CSS variable in the HTML tag

It is as follows:

Just set it in the style property just like the normal CSS statement.

The effect is as follows:

2018-11-16_221537.png

Second, set the CSS variable in JS

The following is indicated by HTML:

If you want var (--color) to take effect, execute the following JavaScript code:

Box.style.setProperty ('--color','#cd0000')

That is, using the setProperty () method, the effect is as follows: GIF screenshot:

Js-set-var.gif

3. Get the CSS variable in JS

To get the CSS variable in JS, you can use the getPropertyValue () method to indicate:

/ / get-- colorCSS variable value

VarcssVarColor=getComputedStyle (box). GetPropertyValue ('--color')

/ / output cssVarColor

/ / the output variable value is: # cd0000

Console.log (cssVarColor)

On the CSS3var () variable

The CSS3var () variable is a good thing. There wasn't much browser support when it was introduced two years ago, and now it's fully supported by Edge16.

The above is about the content of this article on "how to set CSS3 var variables in HTML tags and JS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.