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. GIt 错误与常用命令

    命令和一些其他的属性等 *)在使用git commit -m “description" 这个描述会加在上次提交后所有add的文件后面,所以也可能产生不符合这个描述的文件后面也跟了这个描述, ...

  2. 使用基础知识完成java小作业?强化练习-1.输入数组计算最大值-2.输出数组反向打印-3.求数组平均值与总和-4.键盘输两int,并求总和-5.键盘输三个int,并求最值;

    完成几个小代码练习?让自己更加强大?学习新知识回顾一下基础? 1.输入数组计算最大值 2.输出数组反向打印 3.求数组平均值与总和 4.键盘输两int,并求总和 5.键盘输三个int,并求最值 /* ...

  3. Django---Django的中间件

    Django---Django的中间件 一丶中间件介绍 什么是中间件 官方的说法:中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于在全局范围内改变Dj ...

  4. 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

    前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...

  5. [转发] SAP EPIC 银企直连+TRM资金管理

    事务代码:EPIC_PROC 电子支付集成 收款; 付款; 付款审批; 银行回单(下载,创建,修改,辩识,认领); 查询账户余额; 查询交易明细; BADI增强; VA虚拟账户客户回单自动辨识; .. ...

  6. .Net Core 程序集管理说明(加载)

    .NET CORE 的程序集加载管理和以前的 .NET 发生了很大的变化, 在 .NET CORE 里, 程序集的加载, 依赖了 xx.deps.json 文件, deps.json 文件里,定义了程 ...

  7. VUE组件1

    1.组件基础 通过import引入.vue的文件,在componet中注册,在template中使用. 2.数据,方法和计算属性 注意点: 因为组件是用来复用的,且 JS 里对象是引用关系,如果组件中 ...

  8. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  9. 在 Vim 中,删除 ^@ 符号的几种方法

    在 Vim 中,^@ 表示 ASCII 码中的 NULL 字符,编码为 0x00,占用一个字节. 删除方法 方法1,采用 <CTRL-V><CTRL-J> 或 <CTRL ...

  10. Django之ORM多对多表创建方式,AJAX异步提交,分页器组件等

    MTV与MVC MTV模型: ​ M:模型层(models.py),负责业务对象和数据库关系的映射(ORM) ​ T:模板层(Template),负责如何把页面展示给用户(HTML) ​ V:视图层( ...