元素操作练习（排他思想，隔行换色，页面换肤，Tab栏切换）

青篱竹枫

已于 2022-06-25 10:41:02 修改

阅读量137

点赞数 1

分类专栏： # Javascript 文章标签：大数据

于 2022-06-25 09:22:30 首次发布

本文链接：https://blog.csdn.net/asdf1234dfty/article/details/125452178

版权

Javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.排他思想

先排除其他的样式，再设置自己的样式

<body>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <script>
    //1.获取元素
    var btns = document.getElementsByTagName('button');
    //2.遍历元素并注册事件
    for (var i = 0; i < btns.length; i++) {
      //3.注册事件
      btns[i].onclick = function () {
        //4.去掉所有背景颜色
        for (var i = 0; i < btns.length; i++) {
          btns[i].style.backgroundColor = '';
        }
        //5.设置当前元素背景颜色
        this.style.backgroundColor = 'green';
      }
    }
  </script>

2.页面换肤案例

<style>
    ul {
      width: 850px;
      height: 200px;
      margin: 0 auto;
      /* background-color: pink; */
    }

    ul li {
      list-style: none;
      margin-right: 2px;
      width: 200px;
      height: 200px;
      float: left;

    }

    ul li img {
      width: 200px;
      height: 200px;
    }

    body {
      background: url('https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF') no-repeat center top;
      background-size: cover;
      background-attachment: fixed;
    }
  </style>

  <ul class="huanfu">
    <li><img src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt=""></li>
    <li><img src="https://img1.baidu.com/it/u=1136483216,1165182530&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=355" alt="">
    </li>
    <li><img src="https://img1.baidu.com/it/u=2310170655,486191485&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">
    </li>
    <li><img src="https://img2.baidu.com/it/u=348212466,3548643328&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    </li>
  </ul>

<script>
    var pics = document.querySelector('.huanfu').querySelectorAll('img')
    for (var i = 0; i < pics.length; i++) {
      pics[i].onclick = function () {
        document.body.style.backgroundImage = 'url(' + this.src + ')';
      }
    }
  </script>

3.表格隔行换色

  <style>
    table {
      width: 100%;
      border: 1px solid black;
    }

    .bg {
      background-color: skyblue;
    }
  </style>

 <table>
    <thead>
      <td>序号</td>
      <td>姓名</td>
      <td>性别</td>
    </thead>
    <tbody>
      <tr>
        <td>0111</td>
        <td>aaaa</td>
        <td>女</td>
      </tr>
      <tr>
        <td>01</td>
        <td>aaaa</td>
        <td>女</td>
      </tr>
      <tr>
        <td>01</td>
        <td>aaaa</td>
        <td>女</td>
      </tr>
      <tr>
        <td>01</td>
        <td>aaaa</td>
        <td>女</td>
      </tr>

    </tbody>

  </table>


  <script>
    //1.获取元素
    var trs = document.querySelector('tbody').querySelectorAll('tr');
    for (var i = 0; i < trs.length; i++) {
      trs[i].onmouseover = function () {
        this.className = 'bg';
      }
      trs[i].onmouseout = function () {
        this.className = '';
      }
    }
  </script>

4.全选和取消全选

<style>
    table {
      border: 1px solid grey;
      width: 100%;
      margin: 0 auto;
    }

    thead {
      background-color: skyblue;
    }

    tbody {
      background-color: lightgrey;
    }
  </style>

<table>
    <thead>
      <td><input type="checkbox" id="checkboxAll"></td>
      <td>商品</td>
      <td>价钱</td>
    </thead>
    <tbody id="checkboxEach">
      <tr>
        <td><input type="checkbox"></td>
        <td>iPhone8</td>
        <td>8000</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>iPhone8</td>
        <td>8000</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>iPhone8</td>
        <td>8000</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>iPhone8</td>
        <td>8000</td>
      </tr>
    </tbody>
  </table>


  <script>
    // 1.获取元素
    var checkAll = document.getElementById('checkboxAll');
    var checkEach = document.getElementById('checkboxEach').querySelectorAll('input');
    //选中全选，其余的每一项都被选中
    checkAll.onclick = function () {
      console.log(this.checked);
      for (var i = 0; i < checkEach.length; i++) {
        checkEach[i].checked = this.checked;
      }
    }
    //每一项都被选中时，选中全选
    for (var i = 0; i < checkEach.length; i++) {
      //为每一个子复选框绑定事件
      checkEach[i].onclick = function () {
        var flag = true;
        //每次点击都要循环检查所有按钮是选中
        for (var i = 0; i < checkEach.length; i++) {
          if (!checkEach[i].checked) {
            flag = false;
          }
        }
        checkAll.checked = flag;
      }
    }
  </script>

5.Tab栏切换案例

初始阶段，将所有item隐藏起来，以便添加点击事件，只有点击了li，相应的item才会出现

 <style>
    ul li {
      list-style: none;
      float: left;
    }

    .tab {
      width: 800px;
      height: 400px;
      background-color: lightblue;
      margin: 0 auto;
    }

    .tab_title {
      width: 100%;
      height: 40px;
      background-color: orange;
    }

    .tab_title ul li {
      height: 40px;
      width: 150px;
      border-right: 2px solid white;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
    }

    .tab_title ul li:hover {
      background-color: red;
    }

    .tab_content {
      width: 100%;
      height: 360px;
      background-color: pink;
    }

    .item {
      display: none;
    }
  </style>

最初只显示商品介绍页面，将行内样式改为block

 <div class="tab">
    <div class="tab_title">
      <ul>
        <li>商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_content">
//最初只显示商品介绍页面
      <div class="item" style="display:block;">商品介绍模块内容</div>
      <div class="item">规格与包装模块内容</div>
      <div class="item">售后保障模块内容</div>
      <div class="item">商品评价模块内容</div>
      <div class="item">手机社区模块内容</div>
    </div>
  </div>

js主要用到获取属性以及排他思想

<script>
    var tab_title = document.getElementsByClassName('tab_title');
    var lis = document.querySelectorAll('li');
    var items = document.getElementsByClassName('item');
    for (var i = 0; i < lis.length; i++) {
//为每个li添加index属性
      lis[i].setAttribute('index', i);
//为每个li添加点击事件
      lis[i].onclick = function () {
//点击后先获取li的index属性，便于与item对应
        var index = this.getAttribute('index');
        console.log(index);
//排他思想，起初隐藏所有的item
        for (var i = 0; i < items.length; i++) {
          items[i].style.display = 'none';
        }
//只有与li的index属性对应的一个item才会显示出来
        items[index].style.display = 'block';
      }

    }

  </script>