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. gcc 编译过程

    gcc 编译过程从 hello.c 到 hello(或 a.out)文件, 必须历经 hello.i. hello.s. hello.o,最后才得到 hello(或a.out)文件,分别对应着预处理. ...

  2. Java自学-日期 Date

    Java的日期类Date Date类 注意:是java.util.Date; 而非 java.sql.Date,此类是给数据库访问的时候使用的 示例 1 : 时间原点概念 所有的数据类型,无论是整数, ...

  3. 简要介绍Linux网络服务的种类

    如果有人问你Linux最强大的功能是什么,你大概会回答“是网络功能”.Lmux操作系统的优势之一就是网络功能了,这包含比较稳定的系统资源分配,以及较为安全的网络防护能力,所以许多人都喜欢用它来进行网络 ...

  4. springmvc处理json数据

    springMVC提供了处理JSON格式请求/响应的HttpMessageConverter MappingJckson2HttpMessageConverter利用Jackson开源类包处理JSON ...

  5. Golang Web应用 创建docker镜像笔记(win 平台)

    记录的是 本地编译好了再创建容器镜像的方法 ,这样子生成的镜像文件比较小,方便分发部署 win 平台需要设置golang交叉编译 生成linux可执行文件 CMD下: Set GOOS="l ...

  6. Golang: 读取文件并统计内容

    上次我们从命令行接收用户输入,并统计了每次输入内容出现的次数,今天对程序加以改造,使其能够读取文件内容,并统计每行文本出现的次数. 首先,我们把接收输入的逻辑封装成一个函数: // scan.go p ...

  7. python3.5如何安装statsmodels包?

    如题: 系统win10,64 python3.5 32 使用pip install statsmodels 会报错,说cpython没有安装.一直找不到解决办法,就只好去第三方库下载了一个 http: ...

  8. 浅谈Python设计模式 - 适配器模式

    声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 从本篇便开始介绍结构型设计模式,而适配器设计模式便是该类设计模式的一种,那么什么 ...

  9. 大数据:Hadoop(HDFS 的设计思路、设计目标、架构、副本机制、副本存放策略)

    一.HDFS 的设计思路 1)思路 切分数据,并进行多副本存储: 2)如果文件只以多副本进行存储,而不进行切分,会有什么问题 缺点 不管文件多大,都存储在一个节点上,在进行数据处理的时候很难进行并行处 ...

  10. SQL注入流程图

    http://127.0.0.1/sqli-labs-master/Less-2/index.php? id=1 1 输入单引号   ‘            进行检验是否存在输入 http://12 ...