CSS中的动态变量(通过:root选择器和var())
发布时间：2023-06-15 12:57:55 作者：Evan233:D 
我要评论
我要评论有时候我们需要动态变换一些皮肤就可以使用这个root定义不同的颜色实现不同的皮肤，下面程序员之家小编就为大家分享一下简单逻辑,需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
使用场景
需要动态计算一个div(A盒子)的left值,该值为这个A盒子的自身宽度,A盒子的自身宽度根据内容变化而变化
使用方法
在css中增加
:root{
--movenum: 0;
}在root中自定义变量:‘–movenum’
在JS中
//获取root元素
const root = 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:30px 20px 40px;
下面是其它同学的补充
css中的 :root
:root
是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。
在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。
用 – 这样写法加上样式名称 例如：–background 引用：var(–background)
:root {
? ? --blue: #007bff;
? ? --color:red;
? ? --background:#ccc;
}var()
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）
body {
? background-color: var(--background); ?/* 设置背景颜色为#ccc */
}到此这篇关于CSS中的动态变量(通过:root选择器和var())的文章就介绍到这了,更多相关CSS 动态变量root内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
- 有时候我们需要动态变换一些皮肤就可以使用这个root定义不同的颜色实现不同的皮肤，下面程序员之家小编就为大家分享一下简单逻辑,需要的朋友可以参考下2023-06-15
- 本文主要介绍了CSS中scope和scoped区别小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-13
- 粘滞效果是网页设计中常见的特效之一，在这篇文章中，我们介绍了如何使用JavaScript监听窗口滚动事件，并根据滚动高度和下一个区域的高度来控制导航栏的表现方式，本文结合2023-06-13
Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性，这篇文章主要介绍了前端弹性布局神器display:flex的相关知识,需要的朋友可以参2023-06-12
margin-top塌陷是在CSS的盒子模型中出现的一种现象，本文就介绍了CSS中外边距塌陷的八种解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学2023-05-31
css 的 hover 属性是一种伪类选择器，它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式，这篇文章主要介绍了CSS中的hover属性使用方法,2023-05-29
z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高，本文给大家讲解CSS 中的 z-index 属性实例代码，感兴趣的朋友跟随小编一起看看2023-05-29- 本文主要介绍了html+css实现div居中的8种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-25
在进行打印样式的设计时,我们需要根据实际需求,选择合适的样式,下面这篇文章主要给大家介绍了关于css打印样式设计的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可2023-05-25
这篇文章主要介绍了CSS 中 em 和 rem 单位的区别,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-24
最新评论