原生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() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
随机推荐
- Shell脚本 统计店中店导出数据
有一个数据文件 yue.csv 是这样的 #head yue.csv 日期,商家名称,要求在线数,当天在线数,要求在线时长,在线时长达标数, ……"2017-12-31&quo ...
- 上周 GitHub 热点速览 vol.08:系统设计必看 The System Design Primer
作者:HelloGitHub-小鱼干 摘要:GitHub Trending 上周看点,老项目依旧抢眼,系统设计必看 Repo:The System Design Primer 周获 1k+ star, ...
- C# ,数据导出到带有级联下拉框的模板(一,模板的级联功能)
一.首先解决如何做模板中增加级联功能 1,首先打开一个新的Excel文件,新增sheet,把分类保存在里面,如下图所示 2.回到sheet1,选中要增加下拉框的行(注意:请排除首行,首行是标题) 3. ...
- 广西Ukey登录需求
1.前端控制浏览器用户安装证书[1.检测,2,提示用户强制安装] JITComVCTK_S.exe 2.前端调用接口获取认证原文 3.对前端认证原文处理,提交请求到后端 摘算法处理后的认证原文 认证原 ...
- K8S 容器挂载Windows 文件共享目录,访问出现Permission denied的解决办法
K8S Pod,Docker 容器挂载Windows主机目录,访问相应的文件出现Premission denied的权限访问问题 Windows远程共享目录为//192.168.61.115/huas ...
- vue 路由过渡动效
<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition name="slid ...
- hadoop3自学入门笔记(1)——虚拟机安装和网络配置
前言 年过30惶惶不安,又逢疫情,还是不断学习,强化自己的能力.hadoop的视频和书籍在15年的时候就看过,但是一直没动手实践过,要知道技术不经过实战,一点提升也没有.因此下定决心边学边做,希望能有 ...
- 【USACO】JZOJ,Luogu P2690 接苹果 (dp-线性动规)
同步于CSDN:戳这里QAQ 来源:Luogu P2690,JZOJ 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为 \(1\) 和 \(2\)), 每一棵树上都长满了苹果. ...
- 洛谷P1331-搜索基础-什么是矩形?(我的方案)
原题链接:https://www.luogu.com.cn/problem/P1331 简单来说就是给出一个由‘#’和‘.‘组成的矩阵.需要识别存在几个矩形(被完全填充的).如果有矩形相互衔接则认为出 ...
- 【MVC+EasyUI实例】对数据网格的增删改查(上)
前言 此案例是针对之前做的一个小例子的后台框架的修改,从以前的三层框架改为现在的MVC框架,也是做了一次MVC和EasyUI的结合,分为2篇文章来阐述. 界面如下: 点击"添加"按 ...