原生JS和Css简单实现网页换肤

无边大仙

已于 2023-12-12 17:41:01 修改

阅读量509

点赞数 6

分类专栏： html JS css 文章标签： html 前端 css3

于 2023-12-12 16:41:33 首次发布

本文链接：https://blog.csdn.net/fhl760925513/article/details/134953224

版权

JS 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

利用的原理就是CSS 自定义属性（变量）。

具体用法这里就不多介绍了，可以参考MDN:使用 CSS 自定义属性（变量） - CSS：层叠样式表 | MDN

这里主要是提供一个换肤的思路，完整代码如下，复制下来本地跑一下就明白怎么回事了，还是很简单的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Skin</title>
  </head>
  <style>
    :root {
      --main-bg-color: grey;
      --main-font-color: green;
    }
    .white {
      --main-bg-color: white;
      --main-font-color: black;
    }
    .black {
      --main-bg-color: black;
      --main-font-color: white;
    }
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      margin: 10px auto;
      text-align: center;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
    }
    .btns {
      margin: 200px auto 0 auto;
      text-align: center;
    }
  </style>
  <body>
    <div class="btns">
      <button onclick="changeDefault()">默认</button>
      <button onclick="changeWhite()">白色</button>
      <button onclick="changeBlack()">黑色</button>
    </div>
    <div class="box">好好学习！</div>
  </body>
  <script>
    function changeDefault() {
      const box = document.querySelector(".box");

      box.classList.remove("black");
      box.classList.remove("white");

      console.log(box.classList);
    }

    function changeWhite() {
      const box = document.querySelector(".box");

      box.classList.remove("black");
      box.classList.add("white");

      console.log(box.classList);
    }

    function changeBlack() {
      const box = document.querySelector(".box");

      box.classList.remove("white");
      box.classList.add("black");

      console.log(box.classList);
    }
  </script>
</html>