JS 使用节点的方式实现切换背景图片

最新推荐文章于 2022-04-05 22:35:09 发布

夏沐_lk

最新推荐文章于 2022-04-05 22:35:09 发布

阅读量3.3k

点赞数 2

分类专栏： js代码文章标签： JS 切换背景图片

本文链接：https://blog.csdn.net/guanmao4322/article/details/86585087

版权

js代码专栏收录该内容

65 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    body {
      background-image: url("images/1.jpg");
    }

    #mask {
      background-color: rgba(255, 255, 255, 0.3);
      height: 200px;
      text-align: center;
    }

    #mask img {
      width: 200px;
      margin-top: 35px;
      cursor: pointer;
    }

  </style>

</head>
<body id="bd">
<div id="mask">
  <img src="images/1.jpg" alt="">
  <img src="images/2.jpg" alt="">
  <img src="images/3.jpg" alt="">
</div>
<script src="common.js"></script>
<script>
  var imgObjs=my$("mask").children;//获取的所有的子元素
  //循环遍历所有img,注册点击事件
  for(var i=0;i<imgObjs.length;i++){
    imgObjs[i].onclick=function () {
      document.body.style.backgroundImage="url("+this.src+")";
    };
  }
</script>

</body>
</html>

common.js

/**
 * 根据id属性的值,返回对应的标签元素
 * @param id id属性的值,string类型的
 * @returns {Element} 元素对象
 */
function my$(id) {
    return document.getElementById(id);
}

夏沐_lk

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JS 使用节点的方式实现切换背景图片

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin: 0px; padding: 0p
复制链接

扫一扫

专栏目录