原生js实现元素类名的判存、添加和移除
1、addClass:为指定的dom元素添加样式。
2、removeClass:删除指定dom元素的样式。
3、toggleClass:如果存在(不存在),就删除(添加)一个样式。
4、hasClass:判断样式是否存在。
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) {
obj.className += " " + cls;
}
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
} else {
addClass(obj, cls);
}
}
原生js实现元素类名的判存、添加和移除的更多相关文章
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- JavaScript DOM查询,原生js实现元素子节点的获取
在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- 原生JS查找元素
今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- 原生js获取元素的子元素
//使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...
- 原生js获取元素非行内样式属性的方法
获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...
随机推荐
- 关于Mysql datetime类型存储范围测试
创建一个datetime表 > create table date_time(time datetime); > desc date_time; +-------+----------+- ...
- English--七种句子成分概述
English|七种句子成分概述 现代英语的语法是非常严谨的,英语句子的成分与汉语的句子成分有很大的区别.所以在学习语法的开始,需要上文讲到的句型作为骨架支撑,还需要明白句子的成分是什么,以及个各自的 ...
- python后端链接数据库-----MySQLdb
连接数据库之前请先确认好以下事宜: 1.已经建议好相应的数据库 2.在数据库中已经建立了相应的表 3.已经安装了MySQldb模块 示例: import MySQLdb # 打开数据库连接 db = ...
- Vue第一天
什么是 Vue.js? Vue.js是前端的主流框架之一,与 Angular.js.React.js一起,并称为前端三大主流框架 Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易上手,还便 ...
- 编写可维护的JavaScript-随笔(一)
一.基本的格式化 1. 缩进层级 a) 制表符缩进 i. 好处:制表符和缩进层级是一对一的关系是符合逻辑的,文本编辑器可以配置制表符的展示长度,可以随意调节 ii. ...
- vue.js 如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- Spark基于自定义聚合函数实现【列转行、行转列】
一.分析 Spark提供了非常丰富的算子,可以实现大部分的逻辑处理,例如,要实现行转列,可以用hiveContext中支持的concat_ws(',', collect_set('字段'))实现.但是 ...
- go frame框架,关闭启动时打印的路由列表已经debug信息
import ( "github.com/gogf/gf/frame/g" "github.com/gogf/gf/os/glog" ) func main() ...
- Httpd服务进阶知识-基于FASTCGI实现的LAMP架构
Httpd服务进阶知识-基于FASTCGI实现的LAMP架构 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.httpd+php结合的方式 module: php fastcgi ...
- Buuctf-------WEB之admin
1.抓包扫描一把梭,无事发生地说 注释里发现 万能密码试试,报错 用的flask,pythonweb 后面发现报错页面可以调试,嘿嘿嘿 康康我们发现了什么 拿去破解,无果 于是打算代码拿下来康康,em ...