操作元素（排他思想）-算法

最新推荐文章于 2022-06-30 20:32:19 发布

杨蛋蛋~R

最新推荐文章于 2022-06-30 20:32:19 发布

阅读量234

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50119334/article/details/108903057

版权

javascript 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

排他思想

如果由同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下自己）
顺序不能颠倒（先干掉其他人，再设置自己）

例：点击哪个按钮，哪个就变成粉红色

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
      //1.获取所有按钮元素
      var btns = document.getElementsByTagName("button");
      //btns得到的是伪数组  里面的每一个元素 btns[i]
      //通过循环，让每个按钮获得一个事件
      for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
          //我们先把所有的按钮背景颜色去掉
          for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = "";
            //再让当前的元素背景颜色为pink
            this.style.backgroundColor = "pink";
          }
        };
      }
    </script>
  </body>

模仿百度换肤案例

总共有几个小图片，当点击了其中一个图片后，整个屏幕会变成所点击的图片

<style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background: url(images/xs.jpg) repeat center top;
      }

      li {
        list-style-type: none;
      }
      .baidu {
        overflow: hidden;
        margin: 100px auto;
        background-color: #fff;
        width: 410px;
        padding-top: 3px;
      }
      .baidu li {
        float: left;
        margin: 0 1px;
        cursor: pointer;
      }
      .baidu img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <ul class="baidu">
      <li><img src="images/xs.jpg" /></li>
      <li><img src="images/zjl.jpg" /></li>
      <li><img src="images/zxc.jpg" /></li>
      <li><img src="images/zyl.jpg" /></li>
    </ul>
    <!--总共有几个小图片，当点击了其中一个图片后，整个屏幕会变成所点击的图片-->
    <script>
      //核心算法：把当前图片的src路径取过来，给body做背景即可
      var imgs = document.querySelector(".baidu").querySelectorAll("img"); //这样写更严谨
      //循环注册事件
      for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
          //this.src就是所点击图片的路径
          //把这个路径给 body即可
          document.body.style.backgroundImage = "url(" + this.src + ")";
        };
      }
    </script>
  </body>

效果：
在这里插入图片描述

杨蛋蛋~R

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作元素（排他思想）-算法

排他思想如果由同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想：所有元素全部清除样式（干掉其他人）给当前元素设置样式（留下自己）顺序不能颠倒（先干掉其他人，再设置自己）例：点击哪个按钮，哪个就变成粉红色<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button
复制链接

扫一扫