Getting to the actual front-end development: HTML tags and CSS3 var variable is set JS

A, HTML tag set CSS Variables

as follows:

<div style="--color: #cd0000;">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

CSS statement directly as in normal stylesettings to property.

The effect of the following screenshot:

Two, JS variables set in CSS

Below, HTML schematically:

<div id="box">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

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

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

I.e. using setProperty()method, the following effect is a schematic screenshot GIF:

Three, JS acquired CSS Variables

JS CSS variables can be acquired using the getPropertyValue()method schematically:

// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 

// 输出cssVarColor
// 输出变量值是：#cd0000 
console.log(cssVarColor);

Fourth, on CSS3 var () variables

CSS3  var()variable is a good thing, not two years ago, when the number of browser support, now, Edge16 has fully supported.

That's all for this article, thanks for reading!

Here's the tip I recommend learning exchange circle: 767 273 102, which is learning from the most basic HTML + CSS + JS [cool special effects, games, plug-in package design patterns] to move the front end of HTML5 project real learning materials We are finishing, given to every small front-end partner. 2019 the latest technology, synchronization and business needs. Friends are inside learning exchanges, there will be a big cow every day to explain the timing of front-end technology!

Learning the front, we are serious