// 获取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. cdh集群hive升级,数据不丢失

    1.下载hive-1.2.1安装包 http://archive.apache.org/dist/hive/hive-1.2.1/apache-hive-1.2.1-bin.tar.gz 2.将安装包 ...

  2. k8s系列---部署集群

    docer启动出错 [root@centos-minion yum.repos.d]# systemctl start docker Job for docker.service failed bec ...

  3. centos7.5下一键安装nginx-1.8.1

    #!/usr/bin/bash #安装依赖软件 yum install -y make cmake gcc gcc-c++ autoconf automake libpng-devel libjpeg ...

  4. iptables服务器主机防火墙

    iptables参数说明: Commands: Either long or short options are allowed. --append -A chain 链尾部追加一条规则 --dele ...

  5. Flink1.9重大改进和新功能

    一.Flink1.9.0的里程碑意义 二.重构 Flink WebUI Flink社区讨论了现代化 Flink WebUI 的提案,决定采用 Angular 的最新稳定版来重构这个组件.从Angula ...

  6. kali安装—来自重装3次,创建了8个虚拟机的老安装师

    个人是有点生气的,但其实用好默认设置就很简单 我个人参考了好几个博客在这里附上链接: 1.其他人博客每步详细https://blog.csdn.net/chaootis1/article/detail ...

  7. Redis入门(介绍、搭建)——Windows、Centos环境

    一.介绍 Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cac ...

  8. java设计模式--迪米特法则

    基本介绍 1.一个对象应该对其他对象保持最少的了解 2.类与类关系越密切,耦合度越大 3.迪米特法则又叫最少知道原则,即一个类对自己依赖的类知道的越少越好.也就是说,对于被依赖的类不管多么复杂,都尽量 ...

  9. js中(function(){})()的写法用处

    直到今天我才明白的一个玩意!!! 来来来,首先嘛,JS中函数有两种命名方式 1.一种是声明式. 而声明式会导致函数提升,function会被解释器优先编译.即我们用声明式写函数,可以在任何区域声明,不 ...

  10. .NET CORE(C#) WPF 值得推荐的动画菜单设计

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 值得推荐的动画菜单设计 阅读导航 本文背景 代码实现 本文 ...