前端开发面试宝典 web前端开发需要考证么 软件开发做前端工资
你是不是感到很奇怪，css居然有变量（var）了？
你没看错，css真的有变量（var），而且兼容性还不赖：兼容性
使用过css预处理，比如Less的伙伴们相信对变量并不陌生了，Less是这样定义变量的：
css 代码
@blue {
color: blue;
}
.box {
color: @blue;
}
而在css中，也早就有变量了，就是currentColor，它表示当前的文字颜色：
html 代码
<head>
<style>
:root {
color: red;
}
div {
color: currentColor;
}
div.blue {
color: blue;
}
</style>
</head>
<body>
<div class=”blue”>字体是蓝色的</div>
<div>字体是红色的</div>
</body>
从上面的代码运行结果来看，如果当前元素设置了文字的颜色（color）时，currentColor指的是当前文字的颜色，否则会继承其祖先元素中最靠近当前元素的设置了文字颜色的元素的颜色（color）。
闲话聊完了，现在真正进入今天的正题，来看看css中如何定义和使用原生变量。
1、定义和使用
1.1 变量定义
CSS中原生变量的定义语法：
html 代码
–variableName: variableValue;
variableName表示自定义变量名，variableValue表示属性值。
变量名称（variable-name）的规范：
（1）以“–”双横杠开头，后面可以是数字[0-9]、字母[a-zA-Z]、下划线_和短横线-这些组合，甚至是中文也行，但不能包含$、[、^、(、%等字符。
（2）大小写是敏感的
（3）定义只能在声明块{}里面
看下面的例子：
css 代码
:root {
–1: red; /*有效的*/
–background-color: blue; /*有效的*/
–font_size: 20px; /*有效的*/
–宽度: 100px; /*有效的*/
–$color: red; /*无效的*/
}
–color: red; /*无效的*/
当然，并不是只能在:root根元素（这里定义的变量是全局的）里定义，你可以在任意的HTML元素里（相当于局部变量，在其他地方不能用）定义：
css 代码
需要注意的是，当你定义多个同名的变量时，变量的覆盖规则会是由CSS选择器的权重来决定的。比如：
html 代码
<html>
<head>
<style>
:root {
–color: green;
}
.box {
–color: yellow;
}
#box {
–color: orange;
}
* {
color: var(–color);
}
</style>
</head>
<body>
<span>我是绿色，继承根元素</span>
<div class=”box”>我是黄色，通过类设置的</div>
<div id=”box”>
我是橙色，通过ID设置的（权重最大）
</div>
</body>
</html>
1.2 变量使用
相信细心的伙伴们在上面的例子，已经发现变量如何使用。
语法：
html 代码
csspropertyname: var(–variableName [, declarationValue]);
var()会返回–variableName的值，declarationValue表示默认值，也就是当–variableName没有定义的时候，取declarationValue的值。
html 代码
<html>
<head>
<style>
:root {
–color-name: 20px;
}
div {
–color: red;
color: var(–color);
}
span {
color: var(–color, yellow);
}
p {
color: var(–color-name, green);
}
</style>
</head>
<body>
<div>我是红色，自己设置的</div>
<span>我是黄色的，由于没发现变量–color，因此取默认值</span>
<p>我是黑色，并不是绿色</p>
</body>
</html>
这里需要注意两点：
（1）var()第二个参数不需要双引号或单引号括起，括起无效（反正我的测试是这样的）。
（2）var()的默认值起作用仅限于变量未定义，像上面例子中，–color-name等于20px，然后赋给color只会失效，而不会取默认值
当然，我们还可以结合强大的calc()来使用自定义变量：
html 代码
div {
–width: 20px;
width: calc(100% – var(–width));
}
在浏览器上，我们还可以实时调试：
变量之间还可以相互传递，也就是相互赋值，类似JavaScript中的变量一样：
html 代码
<html>
<head>
<style>
:root {
–red: red;
–color: var(–red);
}
div {
color: var(–color);
}
</style>
</head>
<body>
<div>我是红色的</div>
</body>
</html>
使用限制：
CSS自定义属性变量是不能用作CSS属性名称的，比如：var(–color): red;
不能用作背景地址，比如：url(var(–url))；
由于var()后面会默认跟随一个空格，因此在其后面加单位是无效的，比如：–size:20; font-size: var(–size)px会解析成font-size: 20 px;
2、检测浏览器是否支持
有两种方式检测浏览器是否支持自定义属性
（1）使用@supports方法
css 代码
@supports ((–size: 0)) {
/* 支持 */
}
@supports (not (–size: 0)) {
/* 不支持 */
}
（2）使用JavaScript
javascript 代码
if (window.CSS && window.CSS.supports && window.CSS.supports(‘–size’, 0)) {
/* 支持 */
} else {
/* 不支持 */
}
3、使用JavaScript操作原生属性变量
我们可以很方便的使用window.getComputedStyle方法来使读写自定义属性变量（对于window.getComputedStyle，在这里就不多讲，我默认你已经知道了）
获取：
javascript 代码
var rootStyles = getComputedStyle(document.documentElement)
var value = rootStyles.getPropertyValue(‘–variableName’)
// 获取某个元素中定义的属性变量
value = element.style.getPropertyValue(‘–variableName’)
修改：
javascript 代码
element.style.setProperty(‘–variableName’, value)
document.documentElement.style.setProperty(‘–variableName’, value)
实例：
html 代码
<html>
<head>
<style>
div {
color: var(–color);
}
</style>
</head>
<body>
<div>我是红色的，由JavaScript设置</div>
<script>
document.documentElement.style.setProperty(‘–color’, ‘red’);
</script>
</body>
</html>
php前端开发工具 web前端开发视频播放器 前端开发面试模板内容
近期评论