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. 老司机告诉你高质量的Java代码是怎么练成的?

    一提起程序员,首先想到的一定是"码农",对,我们是高产量的优质"码农",我们拥有超跃常人的逻辑思维以及不走寻常路的分析.判别能力,当然,我们也有良好的编码规范, ...

  2. 学生管理系统_排序后通过name删除列表里的字典

    l = [{'name': 'wangfan', 'age': 18, 'sex': 'nan'}, {'name': 'wangerfan', 'age': 10, 'sex': 'nan'}, { ...

  3. BOM和DOM的区别

    一.BOM和DOM之间的关系图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象由于window是顶层对象,因此调用它的子对象时可以不显示的指明 ...

  4. PAT1116: Come on! Let's C

    1116. Come on! Let's C (20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue &quo ...

  5. 关于bootstrap-datetimepicker 插件的配置参数详解

    本人在网上查找的,  觉得还不错,就抄过来了... 有错误大家一起讨论,谢谢... 原地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ 项目 ...

  6. mongodb的设计特征

    MongoDB 的设计目标是高性能.可扩展.易部署.易使用,存储数据非常方便.其主要功能特性如下.   (1)面向集合存储,容易存储对象类型的数据.在MongoDB 中数据被分组存储在集合中,集合类似 ...

  7. Django+Bootstrap+Mysql 搭建个人博客(六)

    6.1.comments插件 (1)安装 pip install django-contrib-comments (02)settings INSTALLED_APPS = [ 'django.con ...

  8. XStream实现缓存

    ************************************************************************************ 系统实现缓存有多种方式,如re ...

  9. 用spark导入数据到hbase

    集群环境:一主三从,Spark为Spark On YARN模式 Spark导入hbase数据方式有多种 1.少量数据:直接调用hbase API的单条或者批量方法就可以 2.导入的数据量比较大,那就需 ...

  10. BZOJ_2440_[中山市选2011]完全平方数_容斥原理+线性筛

    BZOJ_2440_[中山市选2011]完全平方数_容斥原理 题意: 求第k个不是完全平方数倍数的数 分析: 二分答案,转化成1~x中不是完全平方数倍数的数的个数 答案=所有数-1个质数的平方的倍数+ ...