使用css变量动态换肤

最新推荐文章于 2023-11-27 18:08:45 发布

Ritchie___

最新推荐文章于 2023-11-27 18:08:45 发布

阅读量364

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_40278455/article/details/104310341

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

结构

    <div class="header">header</div>
    <button onclick="handleChange()">change theme</button>

样式

  <style>
    :root {
      /* :root伪类选择器表示文档根元素<html> */
      --backgroundColor: #f0f0f0;
      --color: #232323;
    }

    .header {
      background-color: var(--backgroundColor);
      color: var(--color);
      padding: 30px;
      margin: 30px;
    }

  </style>

事件

通过js来动态设置css变量

<script>
  document.body.style.setProperty('--backgroundColor', '#f0f0f0');
  document.body.style.setProperty('--color', '#232323');

  function handleChange() {
    const color = document.body.style.getPropertyValue('--color').trim();
    if (color === '#232323') {
      document.body.style.setProperty('--backgroundColor', '#000');
      document.body.style.setProperty('--color', '#fff');
    } else {
      document.body.style.setProperty('--backgroundColor', '#f0f0f0');
      document.body.style.setProperty('--color', '#232323');
    }

  }
</script>

效果

在这里插入图片描述
切换后

Ritchie___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css变量动态换肤

结构 <div class="header">header</div> <button onclick="handleChange()">change theme</button>样式 <style> :root { /* :root伪类选择器表示文档根元素<html> */ ...
复制链接

扫一扫