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. dubbo+zookeeper+springboot构建服务

    本次和大家分享的是dubbo框架应用的初略配置和zookeeper注册中心的使用:说到注册中心现在我使用过的只有两种:zookeeper和Eureka,zk我结合dubbo来使用,而Eureka结合s ...

  2. 批处理(Batch)---批处理脚本。

    批处理(Batch),也称为批处理脚本.顾名思义,批处理就是对某对象进行批量的处理,通常被认为是一种简化的脚本语言,它应用于DOS和Windows系统中.批处理文件的扩展名为bat .目前比较常见的批 ...

  3. gawk编程语言

    gawk是一门功能丰富的编程语言,你可以通过它所提供的各种特性来编写好几程序处理数据. 22.1 使用变量 gawk编程语言支持两种不同类型的变量: 内建变量和自定义变量 22.1.1 内建变量 ga ...

  4. Java并发之ReentrantLock

    一.ReentrantLock简介 ReentrantLock字面意义上理解为可重入锁.那么怎么理解可重入这个概念呢?或者说和我们经常用的synchronized又什么区别呢? ReentrantLo ...

  5. vue的生命周期钩子

    生命周期过程: new vue() :vue实例进行初始化,读取所有生命周期函数,并没有执行(不会调用) beforeCreate():创建前,读取属性,计算属性,添加set/get,读取watch ...

  6. ubuntu18.04安装搜狗拼音

    1.下载好搜狗安装包http://pinyin.sogou.com/linux/ ,注意位数! 2.打开终端安装依赖    sudo apt install libfcitx-qt0 3.提取下载好的 ...

  7. 功能式Python中的探索性数据分析

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 这里有一些技巧来处理日志文件提取.假设我们正在查看一些Enterprise Splunk提取.我们可以用Splunk来探索数据.或者我们可以 ...

  8. java集合HashMap、HashTable、HashSet详解

    一.Set和Map关系 Set代表集合元素无序,集合元素不可重复的集合,Map代表一种由多个key-value组成的集合,map集合是set集合的扩展只是名称不同,对应如下 二.HashMap的工作原 ...

  9. Java 标准 I/O 介绍

    一.Java标准I/O知识体系图: 二.I/O是什么 I/O 是Input/Output(输入.输出)的简称,输入流可以理解为向内存输入,输出流是从内存输出. 三.Java I/O 用途与对应的流一览 ...

  10. springboot+mybatis+ehcache实现缓存数据

    一.springboot缓存简介 在 Spring Boot中,通过@EnableCaching注解自动化配置合适的缓存管理器(CacheManager),Spring Boot根据下面的顺序去侦测缓 ...