CSS---css全局变量与局部变量

最新推荐文章于 2023-07-27 19:44:48 发布

maidu_xbd

最新推荐文章于 2023-07-27 19:44:48 发布

阅读量1.5k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/maidu_xbd/article/details/105504794

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

CSS变量为自定义属性，由自定义编辑设定值【--main--bg-color:#ddd;】,通过var()函数来获取值【color:var(--main-bg-color);】。css变量可在css文档中重复使用，当需要修改时，仅需要修改设定值，设定的变量名最好是设置为语义化的标签。

1、在css中设定全局变量和局部变量

2、.在js中获取和设置css变量

// 1.在js中获取css变量
const box = document.querySelector(".box")
const boxStyles = getComputedStyle(box)
const boxBorderColor = boxStyles.getPropertyValue("--box-border-color")
console.log(boxBorderColor)

// 2. 在js中设置css变量
box.style.setProperty("--box-bg-color", "#e4e4e4")