CSS变量之var()函数的应用——动态修改样式 & root的使用

一、css变量

body {
  --foo: #7F593F;
  --urls: './img/xxx.jpg';
}

1
2
3
4
5

变量的名称可以用数字、汉字等，不能包含**$，[，^，(，%**等字符，变量的值也是可以使用各种属性值：
如：

// 定义css变量
:root{
  --黑色背景: #3a6b5c;
  --255: rgb(256, 256, 256);
  --pd: 10px 20px;
  --height: 200px;
  --transition-duration: .36s;
  --margin-top: calc(2vh + 20px);
}
      
// 使用css变量
div{
	color: var(--256);
	margin-top: var(--margin-top);
	padding: var(--pd);
	width: var(--height);
	height: var(--height);
	background-color: var(--黑色背景, #000);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

:root是CSS 伪类匹配文档树的根元素。

对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同
1
2
3

二 、var()函数使用

:root {
  --黑色背景: #3a6b5c;
}
body {
  background-color: var(--黑色背景, #000);
}

1
2
3
4
5
6
7

如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

:root {
  --黑色背景: #3a6b5c;
}
      
body {
  background-color: var(--黑色背景, #000);
}

1
2
3
4
5
6
7
8

三、复杂的CSS3 calc()计算

body {
  --col: 4;
  --margins: calc(24px / var(--col));
}

1
2
3
4
5

四、JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--黑色主题', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--黑色主题').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--黑色主题');

1
2
3
4
5
6
7
8
9
10