欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS变量实现主题切换的方法

程序员文章站 2022-03-05 21:36:01
css 变量基本用法声明一个变量，属性名需要以两个减号（--）开始，属性值则可以是任何有效的css值。element { --main-bg-color: brown;}选择器是指定变量的可见作用域...

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语句，这引入了一个新的概念：计算时有效性。

<p>this paragraph is initial black.</p> 

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

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

  • 检查属性 color 是否为继承属性。是，但是 <p> 没有任何父元素定义了 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);

主题切换

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      :root {
        --bg: #000;
        --fontsize: 25px;
      }
      .pink-theme {
        --bg: hotpink;
      }
      body {
        transition: background 1s;
        background: var(--bg);
      }
      button {
        position: fixed;
        top: 50%;
        left: 50%;
        transition: color 1s;
        transform: translate(-50%, -50%);
        padding: 20px;
        border: none;
        background: #fff;
        font-size: var(--fontsize);
        color: var(--bg);
      }
    </style>
  </head>
  <body>
    <button>点击切换</button>
    <script>
      document.queryselector("button").addeventlistener("click", () => {
        if (document.body.classlist.contains("pink-theme")) {
          document.body.classlist.remove("pink-theme");
        } else {
          document.body.classlist.add("pink-theme");
        }
      });
    </script>
  </body>
</html>

到此这篇关于css变量实现主题切换的方法的文章就介绍到这了,更多相关css主题切换内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

相关标签： 主题切换 变量 css

上一篇： BIOS短句的解释

下一篇： 锐龙AMD Ryzen来袭 配什么主板你知道吗

推荐阅读