0
点赞
收藏
分享

微信扫一扫

CSS:变量函数var和自定义属性


文章目录

  • ​​CSS变量​​
  • ​​var()函数​​

CSS变量

CSS变量分为两部分:变量声明和变量使用。
变量的声明是由CSS自定义属性和对应的属性朱组成的,比如:

:root {
--custom-color: deepskyblue;
}

在这段代码中,–custom-color是属于css的自定义属性名,deepskyblue是属性值。css自定义属性的命名限制比较少,但是也不能出现$、[、]、^、(、)、%等等特殊字符。

var()函数

var函数是使用我们自定义的属性,语法为:​​var(属性名)​​。

CSS自定义的属性,可以在html标签内设置,比如:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量</title>
<style>
</style>
</head>

<body>
<div style="--color: deepskyblue;">
<p style="border: 10px solid var(--color);">5555</p>
</div>
</body>

</html>

对应效果如图:

CSS:变量函数var和自定义属性_css


虽然是可以这样写,但是不建议,因为这样的写法,会导致代码混乱,可读性差,不利于维护。

CSS自定义属性也可以在JavaScript中定义,直接修改上面的代码:

<div id="box" >
<p style="border: 10px solid var(--color);">5555</p>
</div>

JavaScript:

<script>
var box = document.getElementById("box")
box.style.setProperty('--color', 'deepskyblue');
</script>

效果如上图所示。

如果仅仅是设置样式,那么也不建议这样写。样式代码和JavaScript代码最好是分开,这样利于维护。

如果我们自定义的属性值,需要能够作为字符串展示在页面中,那该怎么写呢?
这就需要借助CSS的计数器来呈现自定义属性值了,代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量</title>
<style>
:root {
--percent: 23;
}
#box::before{
counter-reset: progress var(--percent);
content: counter(progress);
}
</style>
</head>

<body>
<div id="box">
<p>5555</p>
</div>
</body>

</html>

效果如图:

CSS:变量函数var和自定义属性_html_02

在一个应用中和使用大量相同的属性值,比如相同的颜色。这样我们就可以把相同的属性值,设置在自定义属性中,然后在对应的模块中直接通过var函数调用对应的数值即可。


举报

相关推荐

0 条评论