CSS变量学习笔记详解，JS获取修改css变量

目录

1、CSS变量是什么？

2、CSS变量和预处理器中的变量有什么不同？

3、使用CSS变量

1、声明css变量

2、读取CSS变量

2、CSS变量在拼接计算中引用

3、CSS变量有效性

4、CSS变量兼容性

 5、JS获取修改CSS变量

1、获取css变量

2、setProperty()修改css变量

2、注意事项

 

---

1、CSS变量是什么？

     CSS变量，即CSS variable。官方的名称是级联变量的CSS自定义属性，即CSS custom properties for cascading variables 。通过两根连词线（ -- ）声明CSS变量（如：--footer-color: blue;），由var()函数获取值（如：background-color:var(--footer-color);)。适当的使用CSS变量可以使得代码更易于阅读、管理和维护，因为看起来随意的、固定的值有了一个变量名作为提示信息。就如上面的代码一眼就能看出是设置页脚背景色为蓝色，后面如果需要修改页脚背景色只需修改--footer-color的值即可。

2、CSS变量和预处理器中的变量有什么不同？

CSS变量是运行在浏览器中的动态CSS属性，而预处理器变量会被编译成普通的CSS代码。

• 浏览器原生特性，无需经过任何转译就可直接运行
• DOM对象一员，极大便利了CSS与JS之间的联系
• CSS变量不同于预处理器变量，css变量只能用于属性值，不能用于属性名

3、使用CSS变量

1、声明css变量

声明一个css变量，变量名要以两根连词线（--）开始,变量值则可以是任何有效的CSS值，CSS变量写在规则集{}之内，如下：

body{
    --main-bg-color: black; /**声明一个变量名为--main-bg-color，变量值为black的CSS变量*/
}

同时CSS变量是大小写敏感的，--Main-bg-color和--main-bg-color 是两个不同的css变量。

• 属性名可以包含数字，字母，以及下划线或者短横线，也可以是中文，日文或者韩文

2、读取CSS变量

var()函数用于读取变量

var(第一个参数,第二个参数)，第一个参数是CSS变量，第二个参数是可选的，表示默认值

body{
    --main-bg-color: black; /**声明一个变量名为--main-bg-color，变量值为black的CSS变量*/

    background-color:var(--main-bd-color);/**读取变量--main-bd-color的值 */
}

 var()函数还可以使用第二个参数，表示变量的默认值。如果该变量未声明、未赋值，就使用这个默认值

body{
    --main-bg-color: black; /**声明一个变量名为--main-bg-color，变量值为black的CSS变量*/

    background-color:var(--main-bg-color,#FFFFFF);
    /**读取变量--main-bg-color的值 ,
    如果变量--main-bg-color只声明了变量名、未设置变量值，或者忘记声明该变量时，浏览器就会使用var（）的第二个参数作为背景色*/
}

 CSS变量备用值，通过把var()函数作为var()函数的第二个参数，可以设置多个备用值，例如：

.two {
  color: var(--my-var, red); /* 如果--my-var 未定义，则color为红色 */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); /* 如果--my-var，--my-background未定义，则background-color为pink */
}

.three {
  background-color: var(--my-var, --my-background, pink); /* 这种写法是无效的，var（）函数只能存在两个参数 */
}

2、CSS变量在拼接计算中引用

如果变量都是字符串，可以直接拼接

:root{
    --text-one:'hello';
    --text-two:'world'
}

.box:after{
    content: var(--text-one)' 'var(--text-two);
}

变量和单位不能直接拼接

:root{
    --size-one:14;
}

.box{
    font-size:var(--size-one)px; /**无效**/
}

计算结果将是

font-size: 14 px;

由上可知，变量和单位直接拼接会多出一个空格，正确的拼接方式是借用calc()函数，进行计算

{font-size:calc(var(--size-one)*1px);}

当然，calc也可以用作CSS变量值当中

{--size-two:calc(20px * 2);}

 

也可以在CSS变量中使用另一个CSS变量

body{
--top-color: orange;
--bottom-color: yellow;
--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));
}

 

3、CSS变量有效性

 在没有CSS变量以前，CSS有效性和属性是绑定的，但这对CSS变量来说并不适用，因为当CSS变量被解析，浏览器不知道它们什么时候会被使用，所以会默认这些值都是有效的。而且通过var()函数调用时，也要根据上下文环境确定是否有效。

当CSS属性-值对中存在语法错误，该行则会被忽略。然而如果自定义属性的值无效，它并不会被忽略，从而会导致该值被覆盖为默认值。

点我查看css变量有效性示例

• 优先级别：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

常见默认值：

• background 默认值是 transparent
• width 默认值是 auto
• position 默认值是 static
• opacity 默认值是 1
• display 默认值是 inline

4、CSS变量兼容性

虽然现在主流浏览器都已支持css变量，但顽强的 ie11仍未支持，所以为了代码的健壮性，需要检测一下当前浏览器对css变量是否支持。

1、@supports命令

@supports ( (--a: 0)) {
  /** 支持css变量字体为蓝色**/
  section{
    --my-color:blue;
    color:var(--my-color);
  }
}

@supports ( not (--a: 0)) {
  /* 不支持css变量字体为灰色 */
  section{
    color:gray;
  }
}

2、使用具有虚拟查询条件(dummy conditional query)的@supports代码块

section {
  color: gray;
}

@supports(--css: variables) {
  section {
    --my-color: blue;
    color: var(--my-color, 'blue');
  }
} 

 

3、JS检测是否支持

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--masterColor', 'red');
if (isSupported) {
	/* supported */
	console.log('当前浏览器支持CSS变量')
} else {
	/* not supported */
	console.log('当前浏览器不支持CSS变量')
}

 5、JS获取修改CSS变量

1、获取css变量

getPropertyValue()获取CSS变量

document.documentElement.style.getPropertyValue('--testColor')

注意：上面语句只能获取到内联样式的css变量值，要想获取任意位置的CSS变量可以使用下面方法

getComputedStyle(document.documentElement).getPropertyValue('--testcolor')

获取某一标签上的css变量

var divEle=document.querySelector('div');
var divSty=window.getComputedStyle(divEle);
var diveleVal=divSty.getPropertyValue('testcolor');

上面代码展示了获取定义在div标签中testcolor变量的值。 

2、setProperty()修改css变量

document.documentElement.style.setProperty('--testcolor', color);

上面代码展示了修改属性名为 testcolor的值。需要注意的是当定义了多个同名css变量，在对变量值修改时需要指明具体修改变量，代码如下

body{
--testcolor:red;
}
div{
--testcolor:black;
}

document.querySelector('div').style.setProperty('--testcolor', yellow);

 上述代码把div里的testcolor值修改成了黄色，因为body,div有同名css变量testcolor,所以在修改的指明了只修改div里的。

2、注意事项

1.document.querySelector(':root') === document.documentElement
2.优先级： js设置值>内联样式>:root选择器>html选择器
3.document.documentElement.style.getPropertyValue只能获取内联样式的值，而且document.documentElement.style.setProperty('--rect', '7px');方式设置CSS变量会添加到内联样式中去

如果CSS变量不是内联样式定义，document.documentElement.style.getPropertyValue就获取不到
4.getComputedStyle(document.documentElement).getPropertyValue获取到的始终是实际的值
5.四种方式赋值时，如果值包含多个空格，都是总会把多余空格变成一个空格。应该是类似于html页面的元素会把多余空格变成一个空格。