操作class是前端开发中经常需要用到的,尤其在分工细的公司。class几乎是JS工程师与页面构建师的桥梁。几乎所有的流行库都提供了class属性操作的几个方法。如 addClass/removeClass/toggleClass/hasClass。
现在HTML5提供了classList API,除了IE(包括IE9/10),其它现代浏览器均支持该属性。重写了下class属性模块。
domClass = function() {
// IE6-10 不支持
// Safari5/Chrome8/Firefox3.6/Opera11.5 及以上版本支持
var supportClassList = function() {
var div = document.createElement('div');
div.className = 'a';
return !!div.classList;
}();
var hasClass, addClass, removeClass, toggleClass, replaceClass;
function check(el, cls) {
if (el.nodeType !== 1 || typeof cls !== 'string') {
return false;
}
return true;
}
if(supportClassList) {
hasClass = function(el, cls) {
if( check(el, cls) )
return el.classList.contains(cls);
else
return false;
};
addClass = function(el, cls) {
var i = 0, c;
if( check(el, cls) ) {
cls = cls.split(' ');
while( c = cls[i++] ) {
el.classList.add(c);
}
}
};
removeClass = function(el, cls) {
var i = 0, c;
if( check(el, cls) ) {
cls = cls.split(' ');
while( c = cls[i++] ) {
el.classList.remove(c);
}
}
};
toggleClass = function(el, cls) {
if( check(el, cls) ) {
el.classList.toggle(cls);
}
};
}
else {
hasClass = function(el, cls) {
if( check(el, cls) )
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') != -1;
else
return false
};
addClass = function(el, cls) {
if( check(el, cls) && !hasClass(el, cls) ) {
el.className += (el.className ? " " : "") + cls;;
}
};
removeClass = function(el, cls) {
if( check(el, cls) ) {
el.className = el.className.replace(RegExp("\\b" + cls + "\\b", "g"), "");
}
};
toggleClass = function(el, cls) {
hasClass(el, cls) ? removeClass(el, cls) : addClass(el, cls);
};
}
replaceClass = function(el, oldCls, newCls) {
removeClass(el, oldCls);
addClass(el, newCls);
};
return {
has : hasClass,
add : addClass,
remove : removeClass,
toggle : toggleClass,
replace : replaceClass
};
}();
相关:
https://developer.mozilla.org/en/DOM/element.classList
http://davidwalsh.name/classlist
http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist
分享到:
相关推荐
2. **集合与JSON数组的转换**:Fastjson支持List、Map等集合与JSON数组之间的转换,例如`parseArray(String jsonString, Class<T> clazz)`用于将JSON数组解析为Java集合,`JSONArray.toJSONArray(List<T> list)`则...
### Contact Manager Web API 示例[1]CRUD 操作解析 #### 一、概述 本文将详细介绍张善友的《Contact Manager Web API 示例[1]CRUD 操作》中所涉及的关键概念和技术要点。该示例项目是一个基于ASP.NET Web API的...
在本文中,我们将深入探讨如何使用Spring框架构建一个基于基本认证的RESTful API。基本认证是一种常见的HTTP身份验证方法,其中客户端(通常是浏览器或应用程序)通过在请求头中包含一个Base64编码的用户名和密码对...
### Java核心API知识点详解 #### 一、集合框架 **1.1 什么是集合** 集合是Java编程语言中用于存储和操作多个元素的一种容器。它提供了动态管理元素的能力,允许在运行时添加或删除元素。 **1.2 集合与数组** - ...
6. **类名操作**:`classList`属性提供了一组方法来操作元素的类名,如`add()`, `remove()`, `toggle()`, `contains()`等。例如,`document.getElementById('myElement').classList.add('active');` 7. **数据属性...
`System`类提供了系统级别的操作功能,如系统属性访问、输入/输出流的获取和系统环境的控制。由于它位于`java.lang`包下,因此可以直接使用,无需导入。 - `System.out`:标准输出流,常用于打印信息到控制台。 - `...
总的来说,JDK6.0 API中文版是Java开发者的必备参考资料,它详细阐述了Java平台的核心功能,涵盖了从基本类型操作到复杂网络和数据库交互的各个层面。通过深入学习和理解这些API,开发者能够编写出高效、稳定且易于...
标题提到的"ASP.NET Web API对list增删改查的实例",意味着我们将讨论如何使用Web API处理列表数据的常见操作。在.NET开发环境中,VS12(Visual Studio 2012)是常用的一款IDE,它支持创建和调试ASP.NET Web API项目...
在API中,通常会将新数据发送到服务器,服务器则会处理这些数据并创建新的资源。 4. **DELETE** 方法:`DELETE = 删除客户`表示使用DELETE请求可以删除特定的客户记录。这将从服务器上移除相应的资源。 在Java中...
这篇文档旨在提供对Hibernate API的深入理解,帮助开发者更高效地使用Hibernate进行数据库操作。 一、Hibernate概述 Hibernate是Java开发中广泛使用的ORM框架,它提供了一种在Java应用中持久化数据到关系数据库的...
在提供的压缩包文件 "classList-master" 中,可能包含了实现这一功能的完整源码,包括详细的注释和测试用例,这对于理解和使用这个兼容方案非常有帮助。开发者可以查阅这个源码,学习如何利用JavaScript的特性来解决...
映射了List属性后,我们可以利用Hibernate提供的API进行CRUD操作。例如,添加一个新的订单到用户订单列表: ```java Session session = sessionFactory.openSession(); Transaction transaction = session....
- `classList`接口:用于操作元素的类名。可以添加、删除或检查类是否存在,如`element.classList.add('active')`。 2. DHTML(Dynamic HTML)API: - `innerHTML`属性:用于获取或设置HTML元素的全部内容,包括...
你必须作出一个选择,要么在组合元素中使用不能为空的属性,要么选择使用<list>,,<bag> 或者 而不是 。 组合元素有个特别的用法是它可以包含一个<many-to-one>元素。类似这样的映射允许你将一个many-to-many关联表...
2. **封装**:通过将数据和操作数据的方法封装在一个类中,我们可以隐藏内部实现细节,只对外提供公共接口。这有助于防止外部代码对内部状态的不当修改,增强代码的稳定性和安全性。 3. **继承与多态**:Java支持单...
- **DOM操作**:如$.append()、$.html()、$.attr()等,用于动态修改HTML结构和属性。 - **动画效果**:$.fadeIn()、$.slideUp()等方法提供流畅的动画效果。 5. **JUnit API**: - **测试类与方法**:以@Test注解...
JDK API是Java Development Kit的核心组成部分,提供了许多核心功能,如字符串处理、输入/输出流、集合操作、线程管理、网络编程以及数据库操作等。 1. JDK API详解 - java.lang: 这是最基础的包,包含了所有Java...
- `MetaClass`:Groovy的元编程允许在运行时修改类的行为,通过`metaClass`可以添加方法、属性等。 - 动态属性:Groovy对象可以随时添加或删除属性,无需预先定义。 6. **Groovy脚本和命令行执行**: - ...
- **File类**:用于文件和目录的操作,如创建、删除和读写文件属性。 5. **网络编程** - **Socket和ServerSocket**:实现客户端和服务器之间的TCP通信。 - **URL和URLConnection**:用于访问网络资源,支持HTTP...
Hibernate 5的主要目标是简化开发,提高性能,以及增强对Java新特性的支持,如Java 8的日期时间API。它通过提供对象关系映射服务,消除了传统的JDBC编程中的很多繁琐工作,如SQL的编写、结果集的遍历等。 ### 2. ...