CSS如何通过:root选择器和var()实现动态变量

有时候我们需要动态变换一些皮肤就可以使用这个root定义不同的颜色实现不同的皮肤，下面微点阅读小编就为大家分享一下简单逻辑,需要的朋友可以参考下

使用场景

需要动态计算一个div(A盒子)的left值,该值为这个A盒子的自身宽度,A盒子的自身宽度根据内容变化而变化

使用方法

在css中增加

1 2 3

:root{   --movenum: 0; }

在root中自定义变量:‘–movenum’

在JS中

1 2 3 4

//获取root元素 const root = document.querySelector(':root'); //num为A盒子自身的宽度(通过JS计算获取),将num赋值给自定义变量 "--movenum" root.style.setProperty('--movenum', num);

在目标css中使用

1 2 3

.closestyle {   left: var(--movenum); }

原理

root里面可以声明css全局变量，变量的声明对大小写敏感，且需要在被声明的变量前加上"–",且变量只能作为属性值，不能作为属性名！
声明了css全局变量，就可以调用它，通过var()函数调用
例:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

:root {     --primary-color: #ff434f;     --secondary-color: #e3e3e3;     --text-color-darker: #2e2e2e;     background-color: rgb(190, 26, 26); } div {     width: 500px;     height: 500px;     background-color: var(--secondary-color); } body {     background-color: var(--text-color-darker); }

background-color: var(–secondary-color,#ff434f); var()也可以有第二个参数，表示默认值，如果调用的变量不存在则使用默认值。

另: var()还能定义字符串和数值

1 2 3

--hello:'hello'; --max:1920px; --marigin:30px 20px 40px;

下面是其它同学的补充

css中的 :root

:root
是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。
在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。
用 – 这样写法加上样式名称 例如：–background 引用：var(–background)

1 2 3 4 5

:root {     --blue: #007bff;     --color:red;     --background:#ccc; }

var()

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

1 2 3

body {   background-color: var(--background);  /* 设置背景颜色为#ccc */ }

到此这篇关于CSS中的动态变量(通过:root选择器和var())的文章就介绍到这了,希望对你有所帮助。

转自：微点阅读   https://www.weidianyuedu.com