原生JS操作class 极致版
// 获取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 极致版的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- js操作文件 HTML5版
js操作文件 HTML5版,有需要的朋友可以参考下. <!DOCTYPE html> <html> <head> <title>JSFileReader ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 用原生JS写一个网页版的2048小游戏(兼容移动端)
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
- 原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
- 原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
随机推荐
- jenkins 介绍 安装
Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作, 旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins是可扩展的持续集成.交付.部 ...
- Linux系统下常见的数据盘分区丢失的问题以及对应的处理方法
在修复数据前,您必须先对分区丢失的数据盘创建快照,在快照创建完成后再尝试修复.如果在修复过程中出现问题,您可以通过快照回滚将数据盘还原到修复之前的状态. 前提条件 在修复数据前,您必须先对分区丢失的数 ...
- 杭电-------2044一只小蜜蜂(C语言写)
#include<stdio.h> ] = { }; long long divide(int n) { ) { ; } ) { return a[n]; } ) + divide(n - ...
- Shiro知识初探(更新中)
Shiro 是当下常见的安全框架,主要用于用户验证和授权操作. RBAC 是当下权限系统的设计基础,同时有两种解释:一: Role-Based Access Control,基于角色的访问控制即,你要 ...
- MySql数据库精简与绿色启动
1.下载MYSQL的zip包,解压ZIP包 版本低的相对需要的空间少,最好能在mysql-5.6以下,我测试的最高5.6版本为mysql-5.6.46,主要是里面有my.ini文件,高于5.6的版本里 ...
- python中的“赋值与深浅拷贝”
Python中,赋值与拷贝(深/浅拷贝)之间是有差异的,这主要源于数据在内存中的存放问题,本文将对此加以探讨. 1 赋值(添加名字) 赋值不会改变内存中数据存放状态,比如在内存中存在一个名为data的 ...
- pycharm的这些配置,你都知道吗
前言 对于一枚pycharm工具的使用新手,正确了解这门工具的配置,在使用过程中遇到的很多问题也可以迎刃而解哦!! 文章篇幅有限,本篇文章提供以下配置手段: 1.字体大小调整 2.显示你需要的工具窗口 ...
- 【48】数据扩充(Data augmentation)
数据扩充(Data augmentation) 大部分的计算机视觉任务使用很多的数据,所以数据扩充是经常使用的一种技巧来提高计算机视觉系统的表现.我认为计算机视觉是一个相当复杂的工作,你需要输入图像的 ...
- vue 父子通信
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法.更推荐用 props 和 events 实现父子组件通信
- 如何使用Acrok Video Converter Ultimate转换视频?
Acrok Video Converter Ultimate是一个功能强大的程序,可以帮助您转换几乎任何类型的视频格式,例如MKV,AVI,WMV,MP4,MOV,MTS,MXF,DVD,蓝光等. 下 ...