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. 第三章 Maven构建 Java Spring Boot Web项目

    3.1   认识Srping Boot Spring Boot是一个框架,是一种全新的编程规范,它的产生简化了对框架的使用,简化了Spring众多的框架中大量的繁琐的配置文件,所以说Spring Bo ...

  2. MySQL基础-1

    目录 数据库的基本概念 什么是数据库 为什么要使用数据库 数据库的分类 数据库的重要概念 数据库的安装 安装步骤 简单使用数据库 数据库的基本概念 什么是数据库 字面意思数据库就是存储数据的仓库,正常 ...

  3. 【转载】 C#中ArrayList使用GetRange方法获取某一段集合数据

    在C#的编程开发中,ArrayList集合是一个常用的非泛型类集合,可以使用GetRange方法来获取集合中指定索引位置开始的一整段集合数据组成一个新的集合,GetRange方法的签名为virtual ...

  4. 面试题:栈的push和pop序列是否一致

    参数是两个数组,arr1,arr2 stack stack = new Stack() for(int i=0;j=0;i<arr1.length;i++){ stack.push(arr[i] ...

  5. 面试题:什么叫平衡二叉查找树--AVL树

    查找.插入和删除在平均和最坏情况下都是O(log n) 增加和删除可能需要通过一次或多次树旋转来重新平衡这个树 节点的平衡因子是它的左子树的高度减去它的右子树的高度.带有平衡因子 1.0 或 -1 的 ...

  6. MySQL导入数据报错Got a packet bigger than‘max_allowed_packet’bytes错误的解决方法

    由于max_allowed_packet的值设置过小的原因,只需要将max_allowed_packet值设置大一点就OK了.通过终端进入mysql控制台,输入如下命令可以查看max_allowed_ ...

  7. Java集合学习(6):LinkedHashSet

    一.概述 首先我们需要知道的是它是一个Set的实现,所以它其中存的肯定不是键值对,而是值.此实现与HashSet的不同之处在于,LinkedHashSet维护着一个运行于所有条目的双重链接列表.此链接 ...

  8. kbmmw 中使用带验证的REST 服务

    前面介绍的rest 服务,虽然很方便,但是存在任何人都可以访问的安全问题. 今天说一下,如何在kbmmw 中使用带验证的REST 服务? 首先我们在工程中放一个 认证控件TkbmMWAuthoriza ...

  9. IGV解读

    复制于:https://www.cnblogs.com/leezx/p/5603481.html 整合基因组浏览器(IGV)是一种高性能的可视化工具,用来交互式地探索大型综合基因组数据.它支持各种数据 ...

  10. eclipse集成lombok插件

    原文:https://my.oschina.net/u/3771868/blog/1837243 lombok官网:https://projectlombok.org/jar包下载路径:https:/ ...