原生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() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
随机推荐
- 小浩算法|一文让你学会如何用代码判断"24"点
“24点”是一种数学游戏,正如象棋.围棋一样是一种人们喜闻乐见的娱乐活动.它始于何年何月已无从考究,但它以自己独具的数学魅力和丰富的内涵正逐渐被越来越多的人们所接受.今天就为大家分享一道关于“24点” ...
- 解决掉你心中 js function与Function的关系的疑问
前言 在网上有很多关于js function 与 Function直接关系的文章. 但是我感觉过于抽象化了,那么如何是具体化的解释? 正文部分为个人理解部分,如有不对望指出. 正文 <scrip ...
- jdk升级后Eclipse无法启动问题
overview: 今日安装jdk11,设置好环境变量后,eclipse无法运行,由于项目依赖原因,不想更新eclipse的版本. 我的jdk是1.8,在将环境变量设回1.8后依然无法运行.在多次尝试 ...
- [译]Android Studio 3.6 新特性概览
设计 设计编辑器 设计编辑器(比如布局编辑器和导航编辑器)现在提供了一个拆分视图模式,能够同时查看 UI 界面的 Design 视图和 Code 视图.拆分视图取代并改进了早期的预览窗口,并且可以对每 ...
- js中如果遇到低版本安卓设备调用setTimeout不生效解决办法
工作中会遇到低版本安卓设备调用setTimeout不生效,既不会报错,里面的函数也不会执行,这里po一个解决办法,如果不执行则执行安卓自己封装的原生的setTimeout方法:sdk.setTimeo ...
- linux中关机重启命令
shutdown 解释 关机重启命令 语法 shutdown [选项] 时间 -c 取消前一个关机命令 -h 关机 -r 重启 示例 # 现在立刻关机 shutdown -h now # 定时关机 s ...
- 2020数据字典php-直接复制
[2020数据字典php-直接复制] <?php /** * 生成mysql数据字典 */ header ( "Content-type: text/html; charset=utf ...
- 关于css背景的一点总结
background默认背景区域覆盖内容和内边距及边框,分别有以下属性: 1.background-clip(定义背景绘制区域) border-box 背景覆盖边框最外面 padding-box 背景 ...
- linux系统下apache服务的启动、停止、重启命令
本文章简单的介绍了关于linux下在利用命令来操作apache的基本操作如启动.停止.重启等操作,对入门者不错的选择.本文假设你的apahce安装目录为 usr local apache2,这些方法适 ...
- LINUX系统(CentOS7安装)一之JDK8的安装
JDK 的安装系统安装就不做过多介绍,大家从网上寻找安装步骤进行安装,不过我推荐大家进行安装时选择桌面图形化格式进行安装,方便做一部分操作,同时在安装过程中选择英文模式,同时我自己在安装的过程中发现使 ...