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. LinkedList源码

    1.介绍及注意事项 链表由Josh Bloch书写,属于Java集合框架中的一种,LinkedList实现的是双链表,实现了所有的链表操作,可能够实现所有元素(包括)的基本操作. 链表是非线程同步的, ...

  2. CSS学习笔记二:css 画立体图形

    继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...

  3. textarea 里设置 style="resize:none"

    禁止textarea拉伸的方法是::                                    设置这个 style="resize:none" 属性 例子: < ...

  4. 读《图解HTTP》有感-(了解web及网络基础)

    写在前面 <图解HTTP>是由上野宣先生著,于均良先生译 闲暇之余!写写博文甚是高兴.如有不准确,望各位斧正.共同学习! 正文 HTTP协议是什么?能做什么? HTTP(超文本传输协议)实 ...

  5. bootstrap模态对话框(最简单)

    根据公司的需求,需要一个对话框来返回给客户的失败原因,刚刚开在百度上搜了老半天,嫩是没有搜索一个自己想要的,后来发送私信给一个博友,经过他哪里找到了自己想要的答案,废话不多说直接看源码: <!D ...

  6. linux 用户空间与内核空间——高端内存详解

    摘要:Linux 操作系统和驱动程序运行在内核空间,应用程序运行在用户空间,两者不能简单地使用指针传递数据,因为Linux使用的虚拟内存机制,用户空间的数据可能被换出,当内核空间使用用户空间指针时,对 ...

  7. redis缓存本地安装教程

    http://www.runoob.com/redis/redis-install.html

  8. vue2.0填坑有感(持续更新ing)

    1.请求数据 用本地json数据进行mock的时候,一般放在created 过程就Ok了,这样可以尽早获取数据:如果有依赖dom必须存在的清空,就放到mounted里面,具体用法如下所示: // cr ...

  9. linux下如何配置yum源

    first:挂载本地镜像文件(挂载:意为将某个文件放置在系统的一个目录下) mkdir     /media/cdrom  #新建镜像文件挂载目录 cd         /usr/local/src  ...

  10. centos系统查看系统版本、内核版本、系统位数、cpu个数、核心数、线程数

    centos查看系统版本 cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 1)查看centos内核的版本: [root@loc ...