【一键换肤】

最新推荐文章于 2024-03-27 18:36:41 发布

鸿心

最新推荐文章于 2024-03-27 18:36:41 发布

阅读量250

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/ZhiShiCaiFu/article/details/126482705

版权

本文通过一个简单的HTML示例展示了如何利用var函数和JavaScript实现网页一键换肤功能。点击按钮，页面中所有使用了--COLOR-NORMAL变量的元素背景色将随机更改为预设的颜色之一，实现视觉效果的快速切换。

摘要由CSDN通过智能技术生成

<!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>一键换肤</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  <script src="./node_modules/vue/dist/vue.js"></script>
  <style>
    .btn-container > button{
      width: 100px;
      height: 40px;
      display: inline-block;
      border-radius: 4px;
      background-color: var(--COLOR-NORMAL,#409eff);
    }
    .btn-container > div{
      margin-top: 5px;
      width: 50px;
      height: 50px;
      background-color: var(--COLOR-NORMAL,#409eff);
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="changeSkin">一件换肤</button>
    <div class="btn-container">
      <button>默认按钮</button>
      <button >主要按钮</button>
      <button >成功按钮</button>
      <button >信息按钮</button>
      <button >警告按钮</button>
      <button >危险按钮</button>
      <div></div>
    </div>

  </div>
  <script>

    const vm = new Vue({
      el:"#app",
      created(){
        // document.documentElement.style.setProperty('--COLOR-NORMAL', '#2d5afa')
      },
      props:[''],
      methods:{
        changeSkin(){
          let skinRGB = ['#2d5afa','#409eff','#52c41a','#fadb14','#ff4d4f','#f56c6c']
          document.documentElement.style.setProperty('--COLOR-NORMAL', skinRGB[Math.floor(Math.random()*6)])
        }
      },
    })
  </script>
</body>
</html>