直播平台制作，css变量实现动态改变主题色

云豹网络科技

于 2023-07-24 14:16:43 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

文章标签： css tensorflow 前端

原文链接：https://blog.csdn.net/IICOOM/article/details/130348471?spm=1001.2014.3001.5502

该博客围绕直播平台制作，介绍了使用CSS变量实现动态改变主题色的方法。包括在全局作用域下，将变量定义在根伪类:root下以便在HTML文档任意处访问；还提及了局部使用CSS变量时，通过js控制某个元素的CSS变量的做法。

直播平台制作，css变量实现动态改变主题色
全局作用域下的css变量
通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了：

:root {
  --main-bg-color: brown;
}

<!-- 在需要的元素中使用 -->
element {
  background-color: var(--main-bg-color);
}

这样定义一系列的变量后，就意味着可以动态修改它们。下面是通过 js 控制 css 变量，可以这样做：

// 获取全局 css 变量
getComputedStyle(document.documentElement).getPropertyValue(`--main-bg-color`)

// 设置 css 变量
document.documentElement.style.setProperty('--main-bg-color', 'red')

局部使用css变量

.div200 {
  --main-bg-color: #000;
  height: 100px;
  background-color: var(--main-bg-color);
  margin-top: 20px;
}

如果您想要通过 js 控制某个元素的 css 变量，可以这样做：

// 获取某个标签上的css变量
getComputedStyle(document.querySelector('.div200')).getPropertyValue('--main-bg-color')

// 设置 css 变量
document.querySelector('.div200').style.setProperty('--main-bg-color', '#fff')