一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS变量实现主题切换代码方法示例

时间:2021-06-26 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下CSS变量实现主题切换代码方法示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

CSS 变量

基本用法

声明一个变量,属性名需要以两个减号(--)开始,属性值则可以是任何有效的CSS值。

css;">element {
  --main-bg-color: brown;
}

选择器是指定变量的可见作用域,该变量仅用于匹配当前选择器及其子孙,通常的最佳实践是定义在根伪类 :root 下,这样就可以在HTML文档的任何地方访问到它了。

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

使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值:

element {
  background-color: var(--main-bg-color);
}

备用值

用 var() 函数可以定义多个备用值(fallback value),当给定值未定义时将会用备用值替换

备用值并不是用于实现浏览器兼容性的。如果浏览器不支持CSS自定义属性,备用值也没什么用

color: var(--my-var, red);
background-color: var(--my-var, var(--my-background, pink));

有效性

传统的CSS概念里,有效性和属性是绑定的,这对变量来说并不适用。当变量被解析,浏览器不知道它们什么时候会被使用,所以必须认为这些值都是有效的。

即便这些值是有效的,但当通过 var() 函数调用时,它在特定上下文环境下也可能不会奏效。属性和自定义变量会导致无效的CSS语句,这引入了一个新的概念:计算时有效性。

This paragraph is initial black.

:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }

浏览器将 --text-color 的值替换给了 var(--text-color),但是 16px 并不是 color 的合法属性值。代换之后,该属性不会产生任何作用。浏览器会执行如下两个步骤:

检查属性 color 是否为继承属性。是,但是

没有任何父元素定义了 color 属性。转到下一步。

将该值设置为它的默认初始值,black。

当CSS属性-值对中存在语法错误,该行则会被忽略。然而如果自定义属性(变量)的值无效,它并不会被忽略,从而会导致该值被覆盖为默认值。

JavaScript 中的值

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var"); //  MDN上给的,但获取一直是空的,其他两个倒是没问题

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

主题切换



  
    
    
     {
        if (document.body.classList.contains("pink-theme")) {
          document.body.classList.remove("pink-theme");
        } else {
          document.body.classList.add("pink-theme");
        }
      });
    
  

热门栏目