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

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

全局作用域下的css变量

通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了：

 

1	<br>:root {<br>  --main-bg-color: brown;<br>}<br><!-- 在需要的元素中使用 --><br>element {<br>  <br>}<br>

​

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

 

1	<br>// 获取全局 css 变量<br>getComputedStyle(document.documentElement).getPropertyValue(`--main-bg-color`)<br>// 设置 css 变量<br>document.documentElement.style.setProperty('--main-bg-color', 'red')<br>

 

局部使用css变量

 

1	.div200 {<br>  --main-bg-color: #000;<br>  height: 100px;<br>  <br>  margin-top: 20px;<br>}

 

 

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

 

1	<br>// 获取某个标签上的css变量<br>getComputedStyle(document.querySelector('.div200')).getPropertyValue('--main-bg-color')<br>// 设置 css 变量<br>document.querySelector('.div200').style.setProperty('--main-bg-color', '#fff')

 

 以上就是 直播平台制作，css变量实现动态改变主题色，更多内容欢迎关注之后的文章