//添加一个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. UVa 11212 编辑书稿（dfs+IDA*）

    https://vjudge.net/problem/UVA-11212 题意:给出n个自然段组成的文章,将他们排列成1,2...,n.每次只能剪切一段连续的自然段,粘贴时按照顺序粘贴. 思路:状态空 ...

  2. 微信网页跳转页面常见bug处理

    微信网页跳转页面常见bug处理 1.不要直接用a链接直接跳转 2.url后加上时间戳 function gohome() { window.location.href = "../home/ ...

  3. diff详解,读懂diff结果-转载

    阅读目录 1.概述 2.diff如何工作,如何理解diff的执行结果 3.Normal模式 4.Context模式 5.Unified模式 6.比较目录 7.一些有用的参数 回到顶部 1.概述 本文将 ...

  4. React Native 之轮播图swiper组件

    注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...

  5. ubuntu 16.04 u盘挂载以及卸载

    1.列出所有磁盘 sudo fdisk -l 2.最后一段信息显示的为u盘 Device Boot Start End Sectors Size Id Type /dev/sdb4 * 256 786 ...

  6. pycharm Django

    上面的两张图片,是Django项目出错的图片,记得以前也出现过这个情况,当时好像是关闭了一些端口程序,后来就可以了,但是忘记了,那个链接也找不到了,所以现在很困惑,再找找. 电脑上现在程序安装的太多, ...

  7. windows 命令巧用（持续更新）

    netstat -ano netstat -anvb netstat -s -p [tcp|udp|ip|icmp] # 关闭/打开防火墙 netsh firewall set opmode disa ...

  8. LeetCode--198--打家劫舍

    问题描述: 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给 ...

  9. Confluence 6 为 Active Directory 配置一个 SSL 连接

    如果你希望配置 Microsoft Active Directory 的读写权限,你需要在你的 Confluence 服务器和JVM keystore 上安装 Active Directory 服务器 ...

  10. 我的Java学习笔记-Java面向对象

    今天来学习Java的面向对象特性,由于与C#的面向对象类似,不需详细学习 一.Java继承 继承可以使用 extends 和 implements 这两个关键字来实现继承. extends:类的继承是 ...