How to set CSS3 var variables in HTML tags and JS

The content of this article is about how to set CSS3 var variables in HTML tags and JS. It has certain reference value and friends in need You can refer to it, I hope it will be helpful to you.

1. Set the CSS variables in the HTML tag

as follows:

<div style="--color: #cd0000;">
<img  src="/static/imghwm/default1.png"  data-src="mm.jpg"  class="lazy"     style="max-width:90%" alt="How to set CSS3 var variables in HTML tags and JS" >
</div>

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

The effect is as follows:

2. Set CSS variables in JS

as follows, HTML representation:

< ;div id="box">

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

box.style.setProperty('--color', '#cd0000' );

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

3. Obtain CSS variables in JS

You can use the getPropertyValue() method to obtain CSS variables in JS, as shown below:

// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle（box）。getPropertyValue（'--color'）；
// 输出cssVarColor
// 输出变量值是：#cd0000
console.log（cssVarColor）；

4. About CSS3 var() variables

CSS3 var() variables are a good thing, when they were introduced 2 years ago Not many browsers support it yet, but now, Edge16 also fully supports it.

The above is an introduction to how to set CSS3 var variables in HTML tags and JS. If you want to know more about CSS3 tutorial, please pay attention PHP Chinese website.

The above is the detailed content of How to set CSS3 var variables in HTML tags and JS. For more information, please follow other related articles on the PHP Chinese website!