// 获取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. ELK logstash 各种报错

    1.logstash 启动后数据传输了,但是 ElasticSearch 中没有生成索引,查看logstash日志,报错如下 [2018-06-08T14:46:25,387][WARN ] [log ...

  2. C语言switch中case后跟随break语句

    1.case后面的常量表达式实际上只起语句标号作用,而不起条件判断作用,即“只是开始执行处的入口标号”.因此,一旦与switch后面圆括号中表达式的值匹配,就从此标号处开始执行:而且执行完一个case ...

  3. clr via c# 运行时序列化

    1,快速了解序列化----windows IO 系统,FileStream,BinaryFormatter,SoapFormatter--不支持泛型. public class SerializeRe ...

  4. 7.Android-压力测试、单元测试、日志猫使用

    1.压力测试monkey 通过cmd输入下面命令: adb shell monkey -p com.example.phonecall --ignore-crashes --ignore-timeou ...

  5. Foxmail for windows 客户端设置和 IMAP、POP3/SMTP 的设置

    Foxmail支持微信扫码.手机验证码.账号密码三种方式新建腾讯企业邮箱. 注意:目前仅foxmail 7.2.11版本支持微信扫码和手机验证码新建腾讯企业邮箱,可以foxmail官网https:// ...

  6. sql的一般查询语句(增删改查中的查)

    /*例子 判断规则 http://xxx.xxx/new.php?id=57 and 1=1 正确 http://xxx.xxx/new.php?id=57 and 1=2 错误 http://xxx ...

  7. 《自拍教程22》wget_文件下载工具

    wget用途介绍 日常测试过程中,我们可以用wget命令,来下载一些资源文件. wget是一个很好文件下载命令, Linux操作系统下,自带wget命令. Windows操作系统下,需要自己去下载并配 ...

  8. js对象模型1

  9. python命令行运行django项目, can't open file 'manage.py' 问题解决

     找到manage.py的绝对路径即可运行

  10. 【daily】文件分割限速下载,及合并分割文件

    说明 主要功能: 1) 分割文件, 生成下载任务; 2) 定时任务: 检索需要下载的任务, 利用多线程下载并限制下载速度; 3) 定时任务: 检索可合并的文件, 把n个文件合并为完整的文件. GitH ...