CSS中的动态变量(通过-root选择器和var()).docx

第

CSS中的动态变量(通过:root选择器和var())

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

在css中增加

:root{

--movenum:0;

}

在root中自定义变量:movenum

在JS中

//获取root元素

constroot=document.querySelector(:root);

//num为A盒子自身的宽度(通过JS计算获取),将num赋值给自定义变量--movenum

root.style.setProperty(--movenum,num);

在目标css中使用

.closestyle{

left:var(--movenum);

}

root里面可以声明css全局变量，变量的声明对大小写敏感，且需要在被声明的变量前加上,且变量只能作为属性值，不能作为属性名！

声明了css全局变量，就可以调用它，通过var()函数调用

例:

: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()还能定义字符串和数值

--hello:hello;

--max:1920px;

--marigin:30px20px40px;

下面是其它同学的补充

css中的:root

:root

是一个伪类，表示文档根元素，所有主流浏览器均支持:root选择器，除了IE8及更早的版本。

在:root中声明相当于全局属性，只要当前页面引用了:rootsegment所在文件，都可以使用var()来引用。

用这样写法加上样式名称例如：background引用：var(background)

:root{

??--blue:#007bff;

??--color:red;

??--background:#ccc;

}

var()

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

body{

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

}