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

Evan233:D

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2025-07-23 11:12:18 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

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

使用场景

需要动态计算一个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 #javascript #前端

本内容遵循 CC 4.0 BY-SA 版权协议

Shell数学计算（算术运算，加减乘除运算）声明：本篇博客的学习途径主要为以下网站和课堂讲解，发博客目的仅为学习使用,在该博客的基础上做了一定程序的简略和修改。参考博客 : 原文链接：http://c.biancheng.net/shell/ Shell数学计算Shell数学计算数学计算命令对整数进行数学运算: (()) / let / $[] /exprShell (())Shell let命令bc命令：一款数学计算器在 Shell 中使用 bc 计算器 Shell数学计算默认情况下，Shell 不会直接进行算术运算，而是把+两边的数据（数阅读详情

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

使用场景

使用方法

原理

相关推荐