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

浅谈HTML5---classList的api

阅读更多

前言

 

   组内分享会上自己分享过,一直没有扔到博客里面,classList的api还是很有用的。

 

 

正文

 

1、摘要

 

  classList returns a token list of the class attribute of the element.

 

  返回的是元素的一个class 属性的标志的list

 

 

<div id="test" class="red  blue"></div>
 

 

 

  • add         ----- 给元素添加一个指定的class
   类似我以前写的addClass --- http://zhangyaochun.iteye.com/blog/1456980

var test = document.getElementById('test');
test.classList.add('yellow');
 
  • remove   ----- 从元素中删除一个指定的class
    类似我以前写的removeClass ---  http://zhangyaochun.iteye.com/blog/1457888

var test = document.getElementById('test');
test.classList.remove('red');
 
  • toggle     ----如果元素没有指定的class则执行add操作|反之执行remove操作
var test = document.getElementById('test');
test.classList.toggle('yellow')
 
  • contains  ----检测元素是否含有指定的class
     类似我以前写的hasClass ---http://zhangyaochun.iteye.com/blog/1458543

var test = document.getElementById('test');
test.classList.contains('red');   //return true | false
 

 

 

2、浏览器支持情况

 

 

  • Chrome 8+
  • FF 3.6+
  • Opera 11.50+
  • Safari 5.1+

 

 

    其实比较下来对于支持classList的高级浏览器,还是预判断然后调用原生的api,当然对于不支持的还是沿用原来的那些操作类的api。

 

 

 

//判断的方式
var supportClassList = ("classList" in document.createElement("a"));
 

 

 

 

 

 

 

扩展阅读

 

1、https://developer.mozilla.org/en/DOM/element.classList

1
0
分享到:
评论

相关推荐

    javax.servlet-api-3.0.1.jar中文文档.zip

    解压 【javax.servlet-api-***.jar中文文档.zip】,再解压其中的 【javax.servlet-api-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档...

    javax.servlet-api-3.1.0.jar中文文档.zip

    解压 【javax.servlet-api-***.jar中文文档.zip】,再解压其中的 【javax.servlet-api-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档...

    Servlet-API+JSP-API+html-API

    HTML-API通常指的是HTML标准,包括HTML5,它是构建网页的基本标记语言。HTML主要知识点包括: 1. HTML元素:如`&lt;head&gt;`、`&lt;body&gt;`、`&lt;header&gt;`、`&lt;footer&gt;`等,用于构建页面结构。 2. 标签属性:例如`id`、`class`...

    javax.servlet.jsp.jstl-api-1.2.1.jar

    javax.servlet.jsp.jstl-api-1.2.1.jar

    Laravel开发-l5-api-documentor

    `l5-api-documentator`是专为Laravel 5设计的一个文档生成器,它能自动扫描应用中的API路由、控制器方法及相关的注释,然后生成一份详细的、易于理解的API文档。这使得开发者可以快速了解API的功能,同时方便团队间...

    javax.servlet-api-4.0.1.jar中文文档.zip

    解压 【javax.servlet-api-***.jar中文文档.zip】,再解压其中的 【javax.servlet-api-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档...

    Api-php-curl-class.zip

    Api-php-curl-class.zip,php curl类使发送http请求和与web apishpcurl类集成变得容易:http请求变得容易,一个api可以被认为是多个软件设备之间通信的指导手册。例如,api可用于web应用程序之间的数据库通信。通过...

    SugarCRM-REST-API-Wrapper-Class, 用于 SugarCRM REST API的PHP包装类.zip

    SugarCRM-REST-API-Wrapper-Class, 用于 SugarCRM REST API的PHP包装类 的SugarCRM REST API 包装类以Kusuma为单位http://www.asakusuma.com/许可证:MIT电子邮件内容关于安装用法示例便笺get_note_attachment() ...

    javax.annotation-api-1.3.2 jar包.rar

    常见的保留策略有SOURCE(只存在于源代码中,编译后不保留),CLASS(编译时保留,运行时不保留),和RUNTIME(运行时可被反射访问)。 通过深入理解和正确使用`javax.annotation-api-1.3.2.jar` 中提供的注解,...

    javax.servlet-api-4.0.0-b07.jar中文文档.zip

    解压 【javax.servlet-api-***.jar中文文档.zip】,再解压其中的 【javax.servlet-api-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档...

    javax.servlet-api-3.1-b01.jar中文文档.zip

    解压 【javax.servlet-api-***.jar中文文档.zip】,再解压其中的 【javax.servlet-api-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档...

    javax.servlet-api-4.0.0-b01.jar中文文档.zip

    解压 【javax.servlet-api-***.jar中文文档.zip】,再解压其中的 【javax.servlet-api-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档...

    javax.servlet-api-4.0.1.jar

    《深入理解Java Servlet API 4.0.1与JSP自定义标签》 在Web开发领域,Java Servlet API和JSP(JavaServer Pages)是两个不可或缺的重要组件。本篇文章将聚焦于`javax.servlet-api-4.0.1.jar`这个jar包,它是Servlet...

    javax.servlet-api-3.1-b04.jar中文文档.zip

    解压 【javax.servlet-api-***.jar中文文档.zip】,再解压其中的 【javax.servlet-api-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档...

    powermock-classloading-xstream-1.4.7

    powermock-classloading-xstream-1.4.7powermock-classloading-xstream-1.4.7powermock-classloading-xstream-1.4.7powermock-classloading-xstream-1.4.7powermock-classloading-xstream-1.4.7powermock-class...

    servlet-api.jar 下载地址

    5. **使用servlet-api.jar** 在Java项目中,可以直接将servlet-api.jar作为依赖引入,例如在Maven项目中添加如下依赖: ```xml &lt;groupId&gt;javax.servlet &lt;artifactId&gt;javax.servlet-api &lt;version&gt;4.0.1 ...

    classgraph-4.8.83-API文档-中英对照版.zip

    包含翻译后的API文档:classgraph-4.8.83-javadoc-API文档-中文(简体)-英语-对照版.zip; Maven坐标:io.github.classgraph:classgraph:4.8.83; 标签:github、classgraph、jar包、java、中英对照文档; 使用方法:...

    javax.servlet-api-4.0.0-b04.jar中文文档.zip

    解压 【javax.servlet-api-***.jar中文文档.zip】,再解压其中的 【javax.servlet-api-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档...

    Windows-API-program--window-class.rar_api window_window api_wind

    在这个"Windows-API-program--window-class.rar_api window_window api_wind"项目中,我们将探讨如何使用Windows API来创建一个带有按钮的窗口,并获取当前窗口的编号。 首先,我们要理解窗口类(Window Class)在...

    poi-3.17-API文档-中文版.zip

    赠送jar包:poi-3.17.jar; ...使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。

Global site tag (gtag.js) - Google Analytics