// 获取class
function getClass(el) {
return el.getAttribute('class')
}
// 设置class
function setClass(el, cls) {
return el.setAttribute('class', cls)
} // 当然彩蛋压轴戏肯定是在最后的啦
// 判断class是否存在
function hasClass(elements, cName) {
return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
}
// 添加clss
function addClass(elements, cName) {
if (!hasClass(elements, cName)) {
elements.className += " " + cName;
}
}
// 删除class
function removeClass(elements, cName) {
if (hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
}
}
// 切换class
function toggleClass(elements, cName) {
if (hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), "");
} else {
elements.className += " " + cName;
}
}

原生JS操作class 极致版的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  3. js操作文件 HTML5版

    js操作文件 HTML5版,有需要的朋友可以参考下. <!DOCTYPE html> <html> <head> <title>JSFileReader ...

  4. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  5. 用原生JS写一个网页版的2048小游戏(兼容移动端)

    这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

  6. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  7. 原生Js操作DOM

    查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...

  8. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  9. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

随机推荐

  1. ubuntu 配置网卡,DNS, iptables

    # 配置静态ip地址 root@simon:~# vim /etc/network/interfaces auto enp4s0 iface enp4s0 inet static address 19 ...

  2. web访问 FastDFS 方法思路

           由于余老师在 V4.05 以后的版本就把内置 HTTP服务去掉了,所以就算这篇你测试上传成功了,你也访问不了. 推荐大家结合 Nginx 使用 fastdfs-nginx-module ...

  3. 安装python 第三方库(whl,py格式)

      注意:在python环境中输入  help('modules')   可以列出所有已经安装的模块     1.windows平台下:            1..1安装whl文件       安装 ...

  4. [Python]执行Linux命令

    使用subprocess模块 import subprocess # 防火墙服务存在关闭状态 child1 = subprocess.Popen(["systemctl status fir ...

  5. 图解Java设计模式之设计模式面试题

    图解Java设计模式之设计模式面试题 1.1 Java设计模式内容介绍 1.1.1 先看几个经典的面试题 1.1.2 设计模式的重要性 1.1 Java设计模式内容介绍 1.1.1 先看几个经典的面试 ...

  6. 实战kudu集成impala

    推荐阅读: 论主数据的重要性(正确理解元数据.数据元) CDC+ETL实现数据集成方案 Java实现impala操作kudu 实战kudu集成impala impala基本介绍 ​        im ...

  7. mysql必知必会--用正则表达式 进行搜索

    正则表达式介绍 前两章中的过滤例子允许用匹配.比较和通配操作符寻找数据.对 于基本的过滤(或者甚至是某些不那么基本的过滤),这样就足够了.但 随着过滤条件的复杂性的增加, WHERE 子句本身的复杂性 ...

  8. Python3.7+Pycharm+cuda10.0+tensorflow GPU版本 安装

    处理器:I5-7500 显卡   :GTX1050Ti 系统   :Win10 1. 首先搭建Python环境. 官网https://www.python.org/downloads/下载Python ...

  9. 没有正确配置扫描包,提示spring的bean不存在

    如下提示的解决方案: <!-- 扫描org.infor包下面的java文件,有Spring的相关注解的类,则把这些类注册为Spring的bean -->  <context:comp ...

  10. 解决jmeter5.1高版本linux CPU,IO,Memory监控性能测试 java.lang.NoSuchMethodError: org.apache.jmeter.samplers.SampleSaveConfiguration.setFormatter(Ljava/t

    jmeter中也可以监控服务器的CPU和内存使用情况,但是需要安装一些插件还需要在被监测服务器上开启服务. 安装性能监控插件(jmeter-plugins)后报如下错误,是由于jmeter版本过高jm ...