//添加一个class

elem.classList.add(classname);

//删除一个class

elem.classList.remove(classname);

//判断一个class是否已存在

elem.classList.contains(classname);

//如果class已存在则移除，如果不存在则添加

elem.classList.toggle(classname);

　　

// 添加多个class

elem.className = 'cls1 cls2';

　　

HTML5的classList API优化对样式名className的操作的更多相关文章

  1. HTML5 classList API接口

    原文地址:HTML5 classList API 原文日期: 2010年07月13日 翻译日期: 2013年08月23日 当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望 ...

  2. HTML5 classList API

    Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...

  3. 温习classList api

    有道题是一个removeClass的功能,代码里是正则分隔了传入的name,根据name的个数,循环移除掉,让寻找bug..看了了这几行代码,首先想到的是我会如何去优化. 如果看代码一两分钟就能找到公 ...

  4. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

  5. 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  6. 深入理解HTML5：语义、标准与样式

    <深入理解HTML5:语义.标准与样式> 基本信息 作者: (美)布拉德福(Bradford,A.) 海涅(Haine,P.) 译者: 高京 出版社:电子工业出版社 ISBN:978712 ...

  7. HTML5: Screen Orientation API

    媒体的询问取决于智能手机和平板布局调整的方向一致网站.但有时候你被锁定在一个希腊网站特定方向.横向或纵向.此时,是本机格式可以指定保健应用. APP只显示在一个预设格式-独立于实际设备方向.通过使用H ...

  8. sencha touch 扩展篇之使用sass自定义主题样式 （上）使用官方的api修改主题样式

    大家知道,sencha touch是通过我们写的js代码来动态渲染单页面生成一个个div+css的html页面来模拟app应用,那么既然是div+css结构的,我们就可以通过修改css样式来自定义我们 ...

  9. 使用 classList API

    一.classList API 是什么 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时&qu ...

随机推荐

  1. ASP.NET MVC 中使用Ckeditor4.5 编辑器

    一.在项目中添加Ckeditor4.5.11 (1) 新建 ASP.NET MVC5项目,解压缩ckeditor_4.5.11_standard.zip,在VS2015的解决方案资源管理器中将得到的“ ...

  2. （转）Linux I/O 调度方法

    Linux I/O 调度方法 转自https://blog.csdn.net/theorytree/article/details/6259104 操作系统的调度有 CPU调度    CPU sche ...

  3. iframe 通信问题

    iframe作用: 1:页面部分刷新(iframe也是一个window,html是完整的不是部分html片段) 2:跨域 3:父子window通信 iframe1.window.xx=xx;paren ...

  4. English trip V1 - 1.How Do You Feel Now? Teacher:Lamb Key:形容词(Adjectives)

    In this lesson you will learn to describe people, things, and feelings.在本课中,您将学习如何描述人,事和感受. STARTER  ...

  5. codeforces 1041d// Glider// Codeforces Round #509(Div. 2)

    题意:给出,n和飞行员高度h,n是区间数.在区间里飞行员高度不变,其它地方每秒高度-1,x坐标+1.问在高度变为0以前,x坐标最多加多少? 用数组gap记录本区间右端到下一个区间左端的距离.用sum记 ...

  6. Spring Boot 文档

    本节对 Spring Boot 的参考文档做了一个简单概述.本章节对全文的参考手册进行内容上的一些索引. 你可以参考本节,从头到尾依次阅读该文档,也可以跳过不感兴趣的内容. Spring Boot 参 ...

  7. CentOS7 Install Docker(转)

    https://linux.cn/article-4340-1.html CentOS 7 中 Docker 的安装 Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想 ...

  8. 基础的shell脚本

    #! /bin/sha="hello world"echo "A is "   echo $a echo "<br />" ec ...

  9. HashMap相关(二)

    基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外, HashMap 类与 Hashtable 大致相同. ...

  10. Css中如何使英文和拼音变成全大写、全小写和首字母大写？

    想要实现英文和中文拼音变成全大写.全小写和首个字母大写,需要用到 css中text-transform样式属性,接下来介绍一下 1.text-transform的值 1)Capitalize:英文拼音 ...