变量的定义必须要以 -- 开头 #sm-theme {--smTheme: #2A2A2A;--smSettingRig
标签：
此刻要实现网页主题的切换本钱较小的一种方案就是使用css的变量来实现 HTML在HTML的body标签上先界说一个id元素属性
<body id="sm-theme"> <sj-root></sj-root> </body> CSScss界说css变量,变量的界说必需要以 -- 开头
#sm-theme { --smTheme: #2A2A2A; --smSettingRight: #484848; --smSettingRightBox: #2A2A2A; } js在任何处所使用js/ts来获取body上界说的sm-theme属性名从而操纵界说在里面的css样式变量
changeTheme(colorName) { const theamEle = document.getElementById('sm-theme'); // 获取id为sm-theme的元素 theamEle.style.setProperty('--smTheme', colorName); // 设置--smTheme变量为我们想要的颜色 const theamColor = getComputedStyle(theamEle).getPropertyValue('--smTheme'); // 获取--smTheme变量的颜色 if (theamColor === '#2A2A2A') { theamEle.style.setProperty('--smSettingRight', '#484848'); theamEle.style.setProperty('--smSettingRightBox', '#2A2A2A'); } else { theamEle.style.setProperty('--smSettingRight', 'rgba(180,180,180,0.4)'); theamEle.style.setProperty('--smSettingRightBox', '#5C5C5C'); }关于使用css变量实现主题的切换效果
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31475.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")