原生js查询、添加、删除类
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查询、添加、删除类的更多相关文章
- js 查询 添加 删除 练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 原生js动态添加style,添加样式
原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...
- 原生Js封装的动画类
算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...
- 用JQuery动态为选中元素添加/删除类
在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- Vue+iview实现添加删除类
<style> .tab-warp{ border-bottom: solid 1px #e0e0e0; overflow: hidden; margin-top: 30px; posit ...
- 原生js封装添加class,删除class
一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ...
- 原生js动态添加新元素、删除元素方法
1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
随机推荐
- 对Python这门课程的理解。
这门课程是现在热门,对之后的就业和利用的帮助还是很大的. 希望能学完整本书并且能学以致用,而不是单单只获得理论知识. 学完之后能用于数据库.大数据处理.图形编程等等
- Java基础系列--桶排序
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/9045967.html 1.算法简介 桶排序可以算是最简单快速的排序算法了,只是限定条件要多 ...
- markdown 一分钟入门
markdown 很好的一门标记语言 语法简单,记住下面的就入门了,一分钟不到 使用范围广,各式各样的编辑器支持markdown,评论也是支持的, 一般文档后缀为.md markdown 基本用法记住 ...
- Java线程池中submit() 和 execute()方法的区别
两个方法都可以向线程池提交任务, execute()方法的返回类型是void,它定义在Executor接口中, 而submit()方法可以返回持有计算结果的Future对象,它定义在ExecutorS ...
- php开启fileinfo扩展
1.检查当前环境: php -i|grep fileinfo 1 看是否已安装fileinfo扩展,若没有,则进行下一步. 2.安装fileinfo扩展 2.1.下载扩展包 根据各自的版本号进行下载 ...
- HSLA色相饱和透明度
H:Hue(色调),取值为:0 - 360.将色相值想成一个圆环中的度数,随着在圆环上移动,得到不同的颜色. S:Saturation(饱和度),取值为:0.0% - 100.0%.数值越低(降低饱和 ...
- Cookie防篡改机制
一.为什么Cookie需要防篡改 为什么要做Cookie防篡改,一个重要原因是 Cookie中存储有判断当前登陆用户会话信息(Session)的会话票据-SessionID和一些用户信息. 当发起一个 ...
- Pandas的函数应用、层级索引、统计计算
1.Pandas的函数应用 1.apply 和 applymap 1. 可直接使用NumPy的函数 示例代码: # Numpy ufunc 函数 df = pd.DataFrame(np.random ...
- poj~1904
Description Once upon a time there lived a king and he had N sons. And there were N beautiful girls ...
- JAXBContextAPI详解
javax.xml.bind类 JAXBContext java.lang.Object javax.xml.bind.JAXBContext public abstract class JAXBCo ...