原生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 ...
随机推荐
- Django--模型层进阶
目录 QuerySet对象 可切片 可迭代 惰性查询 缓存机制 何时查询集不会被缓存? exists()与iterator()方法 exists() iterator() 中介模型 查询优化 表数据 ...
- 使用别的电脑连接另一台电脑当中的虚拟机中的kylin项目
环境说明: 本机A的ip:192.168.0.242 服务器B的ip:192.168.0.125 服务器上的虚拟机C的ip:192.168.43.129 目前状态: B上面能访问C上的站点kylin站 ...
- js事件【续】(事件类型)
一.UI事件[使用时需要添加on eg: onload 页面加载完成事件]load [一张页面或一幅图像完成加载]页面加载后触发的事件,即进入页面后 unload [用户退出页面]页面卸载 ...
- 组件切换方式(Vue.js)
这里,我用一个注册登录两组件的切换实例来演示: 切换方式一 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- kill 命令在Java应用中使用注意事项
前言 我们都知道,kill在linux系统中是用于杀死进程. kill pid [..] kill命令可将指定的信号发送给相应的进程或工作. kill命令默认使用信号为15,用于结束进程或工作.如果进 ...
- Git拉取Gitlab上的代码时,报128的解决方法
今天拉取gitlab上的代码时出现错误,一直返回128 首先我们确定我们在存储库上有没有权限,然后我就去项目中的 Members上看是否有权限,然后发现也是有的. 然后克隆的时候发现输入一万遍密码都还 ...
- Django之mysql数据库配置
在settings.py中配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # 数据库引擎 'NAME': 'my ...
- SaltStack--远程执行
saltstack远程执行 安装完Saltstack后可以立即执行shell命令,更新软件包并将文件同时分不到所有受管系统.所有回复都以一致的可配置格式返回.远程执行参考文档:http://docs. ...
- Dapper: How to get return value ( output value) by call stored procedure
使用Dapper 执行存储过程插入一条数据,同时返回主键 Dapper 的参数类型有以下四种 System.Data.ParameterDirection public enum ParameterD ...
- php备忘录模式(memento pattern)
晚上刷起来. <?php /* The memento pattern provides the object restore functionality. Implementation is ...