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');

 

原生js查询、添加、删除类的更多相关文章

  1. js 查询 添加 删除 练习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  3. 原生js动态添加style,添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  4. 原生Js封装的动画类

    算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...

  5. 用JQuery动态为选中元素添加/删除类

    在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...

  6. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  7. Vue+iview实现添加删除类

    <style> .tab-warp{ border-bottom: solid 1px #e0e0e0; overflow: hidden; margin-top: 30px; posit ...

  8. 原生js封装添加class,删除class

    一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ...

  9. 原生js动态添加新元素、删除元素方法

    1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. 解决150%DPI下Photoshop不能显示成合适大小的问题

    Adobe官方这里一直不给力,只能靠自己动手了. 和解决CHM高分屏显示的步骤差不多: Ctril+R,输入regedit编辑注册表. 进入到 HKEY_LOCAL_MACHINE > SOFT ...

  2. 用ASP.NET Core 2.0 建立规范的 REST API -- 预备知识 (2) + 准备项目

    上一部分预备知识在这 http://www.cnblogs.com/cgzl/p/9010978.html 如果您对ASP.NET Core很了解的话,可以不看本文, 本文基本都是官方文档的内容. A ...

  3. 使用XHProf分析PHP性能瓶颈(二)

    上一篇文章里,我们介绍了如何基于xhprof扩展来分析PHP性能,并记录到日志里,最后使用xhprof扩展自带的UI在web里展示出来.本篇文章将讲述2个知识点: 使用xhgui代替xhprof的默认 ...

  4. Oracle数据库查询优化方案(处理上百万级记录如何提高处理查询速度)

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引 ...

  5. redHat linux 修改防火墙设置简略版

    1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...

  6. Tiny4412之串口(Uart)驱动编写

    一:tiny4412串口驱动编写 1.串口通信简介 串口通信指串口按位(bit)发送和接收字节,串口通信的概念非常简单,串口按位(bit)发送和接收字节.尽管比按字节(byte)的并行通信慢,但是串口 ...

  7. Xor Sum 01字典树 hdu4825

    Xor Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others)Total S ...

  8. swoft 源码解读【转】

      官网: https://www.swoft.org/ 源码解读: http://naotu.baidu.com/file/814e81c9781b733e04218ac7a0494e2a?toke ...

  9. C. Liebig's Barrels

    You have m = n·k wooden staves. The i-th stave has length ai. You have to assemble nbarrels consisti ...

  10. Sql函数笔记一、case when

    Case具有两种格式.简单Case函数和Case搜索函数. 简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END   ...