`
zhouyrt
  • 浏览: 1158982 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

操作class属性的新API--classList

 
阅读更多

操作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

0
0
分享到:
评论

相关推荐

    fastjson jar包 和 api

    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 操作解析 #### 一、概述 本文将详细介绍张善友的《Contact Manager Web API 示例[1]CRUD 操作》中所涉及的关键概念和技术要点。该示例项目是一个基于ASP.NET Web API的...

    basic-auth-rest-api-with-spring:基本创建用户并通过身份验证获取用户信息请求的实现

    在本文中,我们将深入探讨如何使用Spring框架构建一个基于基本认证的RESTful API。基本认证是一种常见的HTTP身份验证方法,其中客户端(通常是浏览器或应用程序)通过在请求头中包含一个Base64编码的用户名和密码对...

    个人笔记--Java_API

    ### Java核心API知识点详解 #### 一、集合框架 **1.1 什么是集合** 集合是Java编程语言中用于存储和操作多个元素的一种容器。它提供了动态管理元素的能力,允许在运行时添加或删除元素。 **1.2 集合与数组** - ...

    示例4:操作节点属性.rar_javascript操作节点属性

    6. **类名操作**:`classList`属性提供了一组方法来操作元素的类名,如`add()`, `remove()`, `toggle()`, `contains()`等。例如,`document.getElementById('myElement').classList.add('active');` 7. **数据属性...

    java API使用-中文word

    `System`类提供了系统级别的操作功能,如系统属性访问、输入/输出流的获取和系统环境的控制。由于它位于`java.lang`包下,因此可以直接使用,无需导入。 - `System.out`:标准输出流,常用于打印信息到控制台。 - `...

    JDK6.0API(中文)

    总的来说,JDK6.0 API中文版是Java开发者的必备参考资料,它详细阐述了Java平台的核心功能,涵盖了从基本类型操作到复杂网络和数据库交互的各个层面。通过深入学习和理解这些API,开发者能够编写出高效、稳定且易于...

    ASP.NET Web API 对list增删改查的实例 REST

    标题提到的"ASP.NET Web API对list增删改查的实例",意味着我们将讨论如何使用Web API处理列表数据的常见操作。在.NET开发环境中,VS12(Visual Studio 2012)是常用的一款IDE,它支持创建和调试ASP.NET Web API项目...

    api-customers-java

    在API中,通常会将新数据发送到服务器,服务器则会处理这些数据并创建新的资源。 4. **DELETE** 方法:`DELETE = 删除客户`表示使用DELETE请求可以删除特定的客户记录。这将从服务器上移除相应的资源。 在Java中...

    Hibernate-api Hibernate文档

    这篇文档旨在提供对Hibernate API的深入理解,帮助开发者更高效地使用Hibernate进行数据库操作。 一、Hibernate概述 Hibernate是Java开发中广泛使用的ORM框架,它提供了一种在Java应用中持久化数据到关系数据库的...

    classList:为IE8扩充classList特性

    在提供的压缩包文件 "classList-master" 中,可能包含了实现这一功能的完整源码,包括详细的注释和测试用例,这对于理解和使用这个兼容方案非常有帮助。开发者可以查阅这个源码,学习如何利用JavaScript的特性来解决...

    Hibernate映射集合属性List

    映射了List属性后,我们可以利用Hibernate提供的API进行CRUD操作。例如,添加一个新的订单到用户订单列表: ```java Session session = sessionFactory.openSession(); Transaction transaction = session....

    web前端开发常用API

    - `classList`接口:用于操作元素的类名。可以添加、删除或检查类是否存在,如`element.classList.add('active')`。 2. DHTML(Dynamic HTML)API: - `innerHTML`属性:用于获取或设置HTML元素的全部内容,包括...

    Hibernate中文API大全

    你必须作出一个选择,要么在组合元素中使用不能为空的属性,要么选择使用<list>,,<bag> 或者 而不是 。 组合元素有个特别的用法是它可以包含一个<many-to-one>元素。类似这样的映射允许你将一个many-to-many关联表...

    java-class-design-master (2).zip

    2. **封装**:通过将数据和操作数据的方法封装在一个类中,我们可以隐藏内部实现细节,只对外提供公共接口。这有助于防止外部代码对内部状态的不当修改,增强代码的稳定性和安全性。 3. **继承与多态**:Java支持单...

    SSH 学习的所有api帮助文档

    - **DOM操作**:如$.append()、$.html()、$.attr()等,用于动态修改HTML结构和属性。 - **动画效果**:$.fadeIn()、$.slideUp()等方法提供流畅的动画效果。 5. **JUnit API**: - **测试类与方法**:以@Test注解...

    java编程-API教程

    JDK API是Java Development Kit的核心组成部分,提供了许多核心功能,如字符串处理、输入/输出流、集合操作、线程管理、网络编程以及数据库操作等。 1. JDK API详解 - java.lang: 这是最基础的包,包含了所有Java...

    groovy api 资料 自学文档

    - `MetaClass`:Groovy的元编程允许在运行时修改类的行为,通过`metaClass`可以添加方法、属性等。 - 动态属性:Groovy对象可以随时添加或删除属性,无需预先定义。 6. **Groovy脚本和命令行执行**: - ...

    java1.7 中文api

    - **File类**:用于文件和目录的操作,如创建、删除和读写文件属性。 5. **网络编程** - **Socket和ServerSocket**:实现客户端和服务器之间的TCP通信。 - **URL和URLConnection**:用于访问网络资源,支持HTTP...

    hibernate5--1.入门及核心API

    Hibernate 5的主要目标是简化开发,提高性能,以及增强对Java新特性的支持,如Java 8的日期时间API。它通过提供对象关系映射服务,消除了传统的JDBC编程中的很多繁琐工作,如SQL的编写、结果集的遍历等。 ### 2. ...

Global site tag (gtag.js) - Google Analytics