案例_网页换肤

最新推荐文章于 2023-02-16 14:48:52 发布

不想做程序员的Amateur

最新推荐文章于 2023-02-16 14:48:52 发布

阅读量126

点赞数

分类专栏：前端自学文章标签： js dom

本文链接：https://blog.csdn.net/weixin_46145958/article/details/119494073

版权

前端自学专栏收录该内容

13 篇文章 0 订阅

订阅专栏

案例_网页换肤

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background-image: url(../img/BGI1.jpeg);
        background-size: 100%;
      }
      div {
        width: 800px;
        margin: 50px auto;
      }
      img {
        height: 100px;
        border: 5px solid #fff;
        margin-right: -10px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="../img/BGI1.jpeg" alt="" />
      <img src="../img/BGI2.jpeg" alt="" />
      <img src="../img/BGI3.jpeg" alt="" />
      <img src="../img/BGI4.jpeg" alt="" />
      <!-- 修改样式属性 -->
      <script>
        // 1. 获取元素
        var img = document.getElementsByTagName("img");
        // 2. 批量注册  处理程序
        for (var i = 0; i < img.length; i++) {
          img[i].onclick = function () {
            document.body.style.backgroundImage = "url(" + this.src + ")";
          };
        }
      </script>
    </div>
  </body>
</html>

不想做程序员的Amateur

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例_网页换肤

案例_网页换肤<!DOCTYPE html><html lang="zh-CN"> <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" />
复制链接

扫一扫