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. CentOS-Minimal版本下安装telnet服务和xinetd服务

    默认在CentOS-Minimal版本下没有安装telnet和xinetd服务. 1.安装telnet [root@localhost ~]# rpm -qa | grep telnet  --检查是 ...

  2. 解决0% [Waiting for headers] 导致的unable to lock the administration directory (/var/lib/dpkg/) is another process using it

    这是我在配置vim的YouCompleteMe时遇到的问题,我需要使用CMake来编译YCM. 在我输入 $ sudo apt install cmake 由于网络原因导致安装一直卡在0% [Wait ...

  3. CSS学习笔记3:选择器及优先级

    CSS选择器的类型: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器   1.标签选择器:     以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了 ...

  4. 卸载重装Mysql

    卸载重装前请备份数据库 卸载 sudo apt autoremove --purge mysql-server-core-5.7 清理残留 sudo rm -r /var/lib/mysql* sud ...

  5. FineReport启动后访问404

    近期将FineReport以嵌入式方式部署在Tomcat8上,启动服务后,点击导出下载出现HTTP ERROR 404情况: 百思不得其解啊,纠结了好几天: 后查看原部署Tomcat6服务器的cata ...

  6. 由清除float原理到BFC

    关于浮动 设置为浮动的元素会脱离当前文档流,向左或向右移动直到边缘遇到另一个浮动元素或者到达边界.普通元素不会对齐造成影响. 浮动是把双刃剑,在给我们的布局带来便利的同时有一些缺点需要我们去解决.例如 ...

  7. Python_os、os.path、os.shutil使用案例

    import os import os.path print(os.path.basename('/Users/c2apple/Desktop/彩屏')) #获取路径的最后一个组成部分 os.path ...

  8. struct和union的区别

    1)union是几个不同类型的变量共占一段内存(相互覆盖):struct是把不同类型的数据组合成一个整体 2)对齐方式略有区别:union不需要+,只需要拿出对齐后的最长 structure unio ...

  9. maven中pom文件配置解决资源文件的编码问题

    <build> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId& ...

  10. java 各数据类型之间的转换

    String —> Date SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Date ...