原生js实现addClass,removeClass,hasClass方法
function hasClass(elem, cls) {
cls = cls || '';
if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
}
function addClass(ele, cls) {
if (!hasClass(elem, cls)) {
ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
}
}
function removeClass(ele, cls) {
if (hasClass(elem, cls)) {
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
newClass = newClass.replace(' ' + cls + ' ', ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
}
}
原生js实现addClass,removeClass,hasClass方法的更多相关文章
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...
- 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js实现preAll和nextAll方法
一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
- 原生js 数组的迭代的方法
一.原生js Array给我们提供很多了方法.方便我们操作数组.这些方法的参数,都需要传入一个匿名函数,匿名函数中有三个参数,分别含义是:数组中的项.该项的索引.以及数组本身. 1.filter方法: ...
- 用.native修饰器来对外部组件进行构造器内部方法的调用以及用原生js获取构造器里的方法
html <div id="app"> <span v-text="number"></span> <btn @cli ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
随机推荐
- Android简单封装类似JQuery异步请求
在android开发中经常会使用异步请求数据,通常会使用handler或者AsyncTask去做,handler 配合message 使用起来比较麻烦,AsyncTask 线程池只允许128个线程工作 ...
- 现有一些开源ESB总线的比較
现有的开源ESB总线中,自从2003年第一个开源总线Mule出现后,如今已经是百花争鸣的景象了.如今我就对现有的各种开源ESB总线根据性能.可扩展性.资料文档完整程度以及整合难易程度等方面展开. 一. ...
- iOS系统控件显示中文
App中使用系统控件,一般默认会显示英文,即便系统的语言环境设置的是简体中文.这需要在App的工程中加入中文支持,这样在中文的系统环境下,调用的系统控件,比如“返回”而不是“Back”.步骤如下: 为 ...
- 关于c中的%x及其它格式化符
原文:http://blog.csdn.net/lincyang/article/details/6252443 格式化: %x表示按16进制输出:int a = 16;%02x:输出10:%03x: ...
- EMS电子面单接口对接使用-免费版
快递鸟电子面单接口,可一次对接15家快递公司, 无需和每一家快递公司做对接.支持快递有四通一达.顺丰.EMS.宅急送.德邦.优速等15家快递公司,对顺丰有电子面单服务需求的可以选择顺丰自有的电子面单或 ...
- iOS 左右滑动 手势 响应方法
1. @property (nonatomic, strong) UISwipeGestureRecognizer *leftSwipeGestureRecognizer; @property (no ...
- [Java] Servlet 3 —— 用Java生成GET/POST请求
Servlet是SUN指定的Java服务器端编程规范,用以处理来自客户端的请求,处理并做出响应的一套基础API.Servlet是运行在 Servlet容器中的Java小程序,容器运行在服务器端,服务器 ...
- Android 高级UI设计笔记21:Android SegmentView(分段选择控件)
1. 分段控制(SegmentView) 首先我们先看看什么是SegmentView的效果,如下: 分段控制这个View控件是ios7的分段控制,和QQ消息页面顶部的效果一样,android没有这个控 ...
- 如何解决sql server 2008附加数据库失败
MDF文件是数据库存贮数据的文件,可以通过附加的方法添加到数据库,在添加mdf文件的时候遇到附加数据库失败,具体提示如下: microsoft SQL server,错误5120 最初以为是附加权限的 ...
- 原来腾讯还出过一个开源项目libco
虽然只能在OpenSUSE上使用,还是应该赞一个的.