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实现元素类名的判存、添加和移除的更多相关文章

  1. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  2. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  3. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  4. JavaScript DOM查询,原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  5. 原生js怎么为动态生成的标签添加各种事件

    这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...

  6. 原生JS查找元素

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...

  7. 原生JS获取元素集合的子元素宽度

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...

  8. 原生js获取元素的子元素

    //使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...

  9. 原生js获取元素非行内样式属性的方法

    获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...

随机推荐

  1. Ubuntu 18.04 RTX2080(ti) + tensorflow-gpu + cuda9.0 + gcc5 兼容性问题解决

    0.下载display driver.cuda和cudnn RTX2080 Display Driver cuda cudnn 1. 禁止系统默认的显卡驱动 打开系统黑名单 sudo gedit /e ...

  2. Socket心跳机制-JS+PHP实现

    本文是我在实际工作中用到的Socket通信,关于心跳机制的维护方式,特意总结了一下,希望对朋友们有所帮助. Socket应用:首先Socket 封装了tcp协议的,通过长连接的方式来与服务器通信,是由 ...

  3. SpringMVC中@RequestParam注解作用

    1.不使用@RequestParam  请求参数名必须和形参名称一样 2.使用@RequestParam    请求参数名必须和@RequestParam value属性值一样    请求参数名不必和 ...

  4. Java 数组(一)定义与访问

    一.数组 1.容器概述    容器:是将多个数据存储到一起,每个数据称为该容器的元素. 2.数组概述  数组:数组就是存储数据长度固定的容器,保证多个数据的数据类型要一致. 数组特点: (1)数组是一 ...

  5. Swaks绕过SPF验证进行邮件伪造

    0x00 swaks简介 Swaks是一个功能强大,灵活,可编写脚本,面向事务的SMTP测试工具,由John Jetmore编写和维护. 目前Swaks托管在私有svn存储库中.官方项目页面是http ...

  6. Python 集合(Set)、字典(Dictionary)

    集合(Set) 集合是无序的,无序也就没有索引,不能进行索引相关的操作.无序,python解释器就不能通过索引(位置)区分集合中的相同元素,所以集合中不能有相同的元素. 集合用大括号{  }表示. 集 ...

  7. ansible之REPLACE模块

    > REPLACE (/usr/lib/python2.7/site-packages/ansible/modules/files/replace.py) This module will re ...

  8. MATLAB问题小集合

    1.未定义与 'struct' 类型的输入参数相对应的函数 'tb_optparse' 在运行matlab程序时,出现上述错误. 原因是tb_optparse在common文件夹里面,没在robot文 ...

  9. js 正则表达式 贪婪与惰性

    首先引入一个介绍比较详细的网站 http://www.jb51.net/article/31491.htm 接下来是本人的简介 其实贪婪和惰性很容易理解,从字面意思我们就可以知道,所谓的"贪 ...

  10. mocker-api 原理

    项目网址:https://github.com/jaywcjlove/mocker-api 作用有2个: 运行dev命令后,访问本地开启服务接口,模拟数据: 访问本机接口时,代理到其它服务器,即调用其 ...