• 原生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类
          }
        }
      }

     

  • 相关阅读:
    WP7 操作XML文件
    C#和C/C++指针实现swap交换
    感受
    我学到了什么&nbsp;我思考了什么.
    hdu 2768 Cat vs. Dog (最大独立)
    hdu 1960 Taxi Cab Scheme (最小覆盖)
    hdu 1528 Card Game Cheater (最小覆盖)
    hdu 4160 Dolls (最大独立)
    hdu 2458 Kindergarten (最大独立集)
    hdu 2119 Matrix (最小覆盖)
  • 原文地址:https://www.cnblogs.com/hermit-gyqy/p/10635137.html
Copyright © 2020-2023  润新知