zoukankan      html  css  js  c++  java
  • 原生js查询、添加、删除类

    1.添加类

     为标签添加一个class的类

      如:<div id="box" class="box">内容</div>

         document.getElementById('box').classList.add('on');

     也可以通过这个方法添加多个类

      如:document.getElementById('box').classList.add('on', 'hua', 'liang'); // 添加多个类使用逗号分隔开

    2.移除类

     移除一个类

      如:document.getElementById('box').classList.remove('on');

     也可以通过这个方法移除多个类

      如:document.getElementById('box').classList.remove('on', 'hua', 'liang'); // 移除多个类使用逗号分隔开

    3.查询类

     查询是否含有某一个类

      如: document.getElementById('box').classList.contains('on');  // 查询到类返回true,查询不到类返回false

      方法1.判断class 名是否存在

      var aw1 = document.getElementById('huatu'); 

      if(aw1.classList.contains('on') == true){

         aw1.classList.remove('on');

         aw1.style.margin = '20px auto';

         aw1.style.textAlign = 'center';

       }else{

         aw1.classList.add('on');

         aw1.style.width = '100%';

         aw1.style.lineHeight = '100px';

         aw1.style.background = '#f00';

      }

      方法2. 判断class 名是否存在
      function hasClass(element, cls) {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
      } 
      hasClass(document.querySelector("html"), 'no-js');

    4. 反转

      dom.classList.toggle('active') // 如果当前dom 不存在 类名 active 则为添加 active  类名,如果存在则为 删除 active 类名

    5. 切换

      <style type="text/css">
      .active{
        background-color: #f00;
      }
      .list-a{
        20%;
        line-height: 45px;
      }
      </style> 

      <ul>
        <li class="list-a active">01</li>
        <li class="list-a ">02</li>
        <li class="list-a ">03</li>
        <li class="list-a ">04</li>
        <li class="list-a ">05</li>
        <li class="list-a ">06</li>
        <li class="list-a ">07</li>
      </ul>

      var list = document.getElementsByTagName('li');
      for(var i = 0; i < list.length; i++){
        list[i].onclick = function(){
          if(this.classList.contains('active') != true){     // 如果当前找不到 active 类则为当前点击元素添加一个active类
            for(var k = 0; k < list.length; k++){      // 在添加 active 类之前 先移除所有元素的 active 类
              list[k].classList.remove('active');
            }
            this.classList.add('active');      // 给当前点击的元素添加一个active类
          }
        }
      }

     

  • 相关阅读:
    JavaEE——SpringMVC(11)--拦截器
    JavaEE——SpringMVC(10)--文件上传 CommonsMultipartResovler
    codeforces 460A Vasya and Socks 解题报告
    hdu 1541 Stars 解题报告
    hdu 1166 敌兵布阵 解题报告
    poj 2771 Guardian of Decency 解题报告
    hdu 1514 Free Candies 解题报告
    poj 3020 Antenna Placement 解题报告
    BestCoder5 1001 Poor Hanamichi(hdu 4956) 解题报告
    poj 1325 Machine Schedule 解题报告
  • 原文地址:https://www.cnblogs.com/hermit-gyqy/p/10635137.html
Copyright © 2011-2022 走看看