简单说 CSS变量

最新推荐文章于 2022-07-10 10:54:05 发布

FEWY

最新推荐文章于 2022-07-10 10:54:05 发布

阅读量511

点赞数

分类专栏： CSS 文章标签： css 变量自定义属性 var 简单说

本文链接：https://blog.csdn.net/FE_dev/article/details/77869291

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

说明

变量，我想大家一定知道是什么？在CSS中也是有变量的，我们今天就来说说。

解释

1、声明CSS变量

语法：
–变量名

例如：

body{
    --bg:red;
}

2、使用CSS变量

语法：
var( 变量名[, 默认值 ])
例如：

body{
    --bg:red;
    background:var(--bg);
}

效果图：
这里写图片描述

body{
	/*变量没有定义,使用后面的值作为元素的属性值*/
	background:var(--bg,blue);
}

效果图：
这里写图片描述

3、注意

变量名不能包含$，[，^，(，%等特殊字符，并且变量名是大小写敏感的
变量的定义和使用只能在声明块{}里面

--bg:red;
body{
    background:var(--bg);   /*获取不到--bg*/
}

变量如果需要和其他字符串拼接，直接使用就可以不需要用别的运算符

body:before{
      --con:'css';
      content:var(--con)'变量';
}

但是要注意如果是数值与单位拼接的话需要用 calc() 函数

body{
      --w:100; /* 这里是数值，不是字符串 */
      width:calc(var(--w)*1px);
}

calc() 函数用于动态计算长度值。想了解更多关于calc() 函数的知识，点这里
 http://www.runoob.com/cssref/func-calc.html

总结

我们可以把css变量理解为css的自定义属性，就和background一样，这样会好明白些，变量重复了，哪个会起作用就看css属性的优先级，优先级高的起作用。

body{
	--bg:red;
	background:var(--bg);
}
#body{
	--bg:blue;
	background:var(--bg);
}

<body id="body"></body>

效果图：
这里写图片描述

而通过js也可以操作css变量

// 设置变量
document.body.style.setProperty('--bg', 'red');

// 读取变量
document.body.style.getPropertyValue('--bg');
// 'red'

// 删除变量
document.body.style.removeProperty('--bg');

这里写图片描述

FEWY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单说 CSS变量

说明变量，我想大家一定知道是什么？在CSS中也是有变量的，我们今天就来说说。解释1、声明CSS变量语法： –变量名例如： body{ --bg:red;}2、使用CSS变量语法： var( 变量名[, 默认值 ]) 例如： body{ --bg:red; background:var(--bg);} 效果图： body{ /*变
复制链接

扫一扫