前端一键换肤换肤简单探索

最新推荐文章于 2024-03-26 23:03:57 发布

沁染流年

最新推荐文章于 2024-03-26 23:03:57 发布

阅读量689

点赞数

分类专栏：前端 vue JavaScript 文章标签： js css web

本文链接：https://blog.csdn.net/weixin_49210760/article/details/123977853

版权

前端同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

效果图
默认
在这里插入图片描述
蓝白

方法一。如果要控制的范围不多很小的话
使用控制类名的切换

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="" id="jf" />

    <style>
      .container {
        /* 默认样式 */
        color: black;
        font-size: 24px;
        background-color: white;
      }
      .container.rw p {
        background-color: black;
        color: white;
      }
      .container.bw p {
        background-color: blue;
        color: white;
      }
      .container.br p {
        background-color: black;
        color: red;
      }
      .rw {
        background-color: black;
        color: white;
      }
      .bw {
        background-color: blue;
        color: white;
      }
      .br {
        background-color: black;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>你好</p>
    </div>
    <div class="btns">
      <button class="rw" data-bf="rw">黑白</button>
      <button class="bw" data-bf="bw">蓝白</button>
      <button class="br" data-bf="br">黑红</button>
    </div>
    <script>
      const con = document.querySelector('.container')
      const btns = document.querySelector('.btns')
      const link = document.getElementById('jf')
      btns.onclick = (e) => {
        // console.log('ss')
        const tar = e.target
        if (tar.tagName.toLowerCase() === 'button') {
          con.className = `container ${tar.dataset.bf}`
          // console.log(link.href)
          // link.href = `./css/${tar.dataset.bf}.css`
        }
      }
    </script>
  </body>
</html>

二如果是很大范围的切换，那么可以使用切换样式表来进行，这样易于控制
改变link的herf属性
在这里插入图片描述

沁染流年

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端一键换肤换肤简单探索

效果图默认蓝白方法一。如果要控制的范围不多很小的话使用控制类名的切换<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</titl
复制链接

扫一扫