1、css3中的var()函数

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
var函数有两个参数

var(custom-property-name, value)

custom-property-name 必需。自定义属性的名称（即变量），必需以 – 开头。
value 可选。备用值，在属性不存在的时候使用。

例：

:root {--theme-bg: rgb(28, 172, 198);
}
.box{color: var(--theme-bg);
}

–theme-bg即使用的变量，将变量设置到根元素上，那么其下面的元素在css中就能使用这个变量。

:root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素。

在vue中使用时，可以将:root写在app.vue根组件内，并且不使用scoped，使之作为全局的。

<style lang='scss'>
:root {--theme-bg: rgb(28, 172, 198);
}
</style>

在每个vue组件内都可通过var()直接使用这个变量

<style lang='scss' scoped >
.box{color: var(--theme-bg);
}
</style>

2、通过js修改变量

通过 ele.style.setProperty(key, value) 动态修改 ele元素上的 CSS 变量，使得页面上的其他部分可以应用最新的 CSS 变量对应的样式.

setProperty方法

setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。
语法

object.setProperty(propertyname, value, priority)

propertyname 必需。一个字符串，表示创建或修改的属性。
value 可选，新的属性值。
priority 可选。字符串，规定是否需要设置属性的优先级 important。
可以是下面三个值:
“important”
undefined
“”

样式如第一部分所述
点击按钮时，设置–theme-bg的值为blue，那么就能改变.box中的样式

    change() {document.documentElement.style.setProperty("--theme-bg", "blue");}

document.documentElement获取到的是网页的根元素，即html根标签，即:root选择器对应的元素。

总结：

在:root中定义以–开头的变量，如–theme-bg
在后代元素的css中，就能使用–theme-bg变量作为css的值（注意要使用var()将变量包起来）
通过.style.setProperty修改这个–theme-bg的值，修改后css中的值也就改变了。

注：

当尺寸使用var作为变量时，就不能再使用flexible插件转为rem尺寸了。
var中使用其它css函数时也可以生效

background:linear-gradient(-180deg, var(--nav-bg-color) 0%, var(--theme-color) 100%);

或者

:root {--nav-bg-color:linear-gradient(-180deg, #F98C46 0%, #F8564A 100%);
}
.box{background: var(--nav-bg-color);
}

以上两种方式在var中使用linear-gradient都可以生效。

css3中var函数相关推荐

matlab s% d%,matlab中var函数的翻译For N-D arrays, VAR operates along the first
matlab中var函数的翻译For N-D arrays, VAR operates along the first matlab中var函数的翻译 For N-D arrays, VAR oper ...
MATLAB中var函数，mean函数的含义及用法详细解释
MATLAB中var函数,mean函数的含义及用法详细解释 var函数语句我们先来看var函数,MATLAB命令窗输入help var ,可以得到用到方差函数Syntax有: V = var(X); ...
mysql var和varp的区别_EXCEL中VAR函数和VARP函数什么区别
1.公式不同 var:来计算总体的一个抽样的方差,公式为 sum(( x_i - ave)^2) / ( n-1 ):varp:来计算整个总体的方差,它的参数是全部的数据总体, 公式为 sum(( x ...
css中变形,css3中变形处理
transfrom功能在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
matlab2c使用c++实现matlab函数系列教程-var函数
全栈工程师开发手册 (作者:栾鹏) matlab2c动态链接库下载 matlab库函数大全 matlab2c基础教程 matlab2c开发全解教程 matlab2c调用方法: 1.下载动态链接库 2. ...
html中的函数怎么显示变量,css - 原生变量及使用函数 var()
零.序言前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
python使用numpy中的np.mean函数计算数组的均值、np.var函数计算数据的方差、np.std函数计算数组的标准差
python使用numpy中的np.mean函数计算数组的均值.np.var函数计算数据的方差.np.std函数计算数组的标准差目录
python方差函数_python 中的var()函数和cov函数用法-Go语言中文社区
本文是学习多篇博客总结而得: numpy中var和cov函数求法和MATLAB中var和cov函数求法类似: 首先均值X,样本方差S,样本协方差C 公式分别为: 一. MATLAB和Python中计 ...
CSS3中的calc()函数以及在less中的使用
1. calc()函数在CSS3中我们可以通过calc()函数来动态计算长度值,如: #div {width: calc(100% - 100px); } 它的语法是 calc(expression ...

css3中var函数

1、css3中的var()函数

2、通过js修改变量

setProperty方法

css3中var函数相关推荐

最新文章

热门文章