使用js实现网页换肤效果

小灿同学+1

已于 2023-09-05 14:05:31 修改

阅读量415

点赞数 1

文章标签： javascript 开发语言前端

于 2023-08-29 20:03:14 首次发布

本文链接：https://blog.csdn.net/xiaocantongxue/article/details/132569140

版权

css1.css文件:

body { margin-top: 40px; background: url(bg1.jpg) no-repeat center center; }
dl { width: 400px; border: 2px solid #ccc; background: #FFFFCC; padding: 20px; margin: 0 auto; filter: alpha(opacity: 70); opacity: 0.7; }
dt { font-size: 18px; color: #009933; border-bottom: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; }
dd { margin-left: 0; padding-bottom: 10px; font-size: 14px; padding-left: 10px; }
.text { width: 300px; height: 30px; line-height: 30px; }
textarea { width: 300px; height: 120px; overflow: auto; }
.btn { width: 120px; height: 40px; }
.center { text-align: center; }

css2.css文件:

body { background: url(bg.gif); margin-top: 40px; }
dl { width: 600px; border: 4px solid #fff; background: #669999; padding: 20px; margin: 0 auto; filter: alpha(opacity: 90); opacity: 0.9; }
dt { font-size: 18px; color: #fff; border-bottom: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; }
dd { margin-left: 0; padding-bottom: 10px; font-size: 14px; padding-left: 10px; color: #fff; }
.text { width: 500px; height: 30px; line-height: 30px; font-weight: bold; font-size: 14px; font-family: arial; }
textarea { width: 500px; height: 120px; overflow: auto;font-weight: bold; font-size: 14px; font-family: arial; }
.btn { width: 120px; height: 40px; }
.center { text-align: center; }

js代码:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css2.css" id="link" />
  </head>
  <body>
    <dl id="message">
      <form>
        <dt>
          <strong>可以换肤的提交框：</strong>
          <input id="btn1" cn="css1" type="button" value="皮肤1" />
          <input id="btn2" cn="css2" type="button" value="皮肤2" />
        </dt>
        <dd>输入姓名：<input class="text" type="text" /></dd>
        <dd>输入密码：<input class="text" type="password" /></dd>
        <dd>请您留言：<textarea></textarea></dd>
        <dd class="center"><input class="btn" type="submit" value="提交" /></dd>
      </form>
    </dl>

    <script>
      //1.获取所有的换肤按钮
      var btns = document.querySelectorAll('dt input');
      console.log(btns);
      //2.循环遍历所有的换肤按钮
      btns.forEach(function (btn, i) {
        //3.给换肤按钮添加点击事件
        btn.onclick = function () {
          //4.设置css文件的地址
          var cssUrl = btn.getAttribute('cn') + '.css';
          console.log(cssUrl);

          //5.获取link标签
          var link = document.querySelector('#link');
          //6.将css文件的地址赋值给link标签的href属性
          link.href = cssUrl;
        };
      });
    </script>
  </body>