add:给元素添加一个指定的class

var test = document.getElementById('test');
test.classList.add('yellow');//添加一个class
test.classList.add('yellow','blue');//添加多个class remove:从元素中删除一个指定的class
var test = document.getElementById('test');
test.classList.remove('red'); toggle:如果元素没有指定的class则执行add操作|反之执行remove操作
var test = document.getElementById('test');
test.classList.toggle('yellow')//切换class
test.classList.toggle("visible", i < 10 );//切换visible类取决于第二个参数的条件 contains:检测元素是否含有指定的class
var test = document.getElementById('test');
test.classList.contains('red'); //return true | false

HTML5 classList使用的更多相关文章

  1. HTML5 classList API接口

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

  2. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  3. [转]HTML5 classList API

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

  4. HTML5 classList API

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

  5. 权威指南之脚本化jquery

    jqury函数 jquery()($())有4种不同的调用方式 第一种是最常用的调用方式是传递css选择器(字符串)给$()方法.当通过这种方式调用时,$()方法会返回当前文档中匹配该选择器的元素集. ...

  6. 使用HTML5里的classList操作CSS类

    在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...

  7. html5新增操作类名方式 classList

    如果一个元素有多个类名,要如何删除呢,jqeury提供了removeClass()这个api,如果不用插件,自己封装,可以这样 function removeClass(elm,removeClass ...

  8. HTML5实战与剖析之classList属性

    classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名 ...

  9. HTML5新特性:元素的classList属性与应用

    在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, togg ...

随机推荐

  1. ExtJs常用功能

    1.判断内容是否修改 1) var cgrid = query_panel.cgrid; var v = cgrid.getValues(); //console.log(v); if (v != & ...

  2. MySQL存储过程 游标

    MySQL存储过程  游标 如何在存储过程中使用MySQL游标来遍历SELECT语句返回的结果集 MySQL游标简介 要处理存储过程中的结果集,请使用游标.游标允许您迭代查询返回的一组行,并相应地处理 ...

  3. Shopping List

    剃须啫喱 吉列 70g $22.00 鲁阳家居专营店 剃须水套装 阿帕奇+酷曼 230g+230g $16.80(限时活动) 鲁阳家居专营店 鸡胸肉 撸铁党 100gx9+100g $49.9(限时活 ...

  4. Error during generated code invocation: com.intellij.debugger.engine.evaluation.EvaluateException: Method threw 'java.lang.IllegalAccessError' exception.

    场景描述: 再从该数据库中读取数据进行处理的时候,需要将某个字段加入到一个动态的map中,然后需要对该map进行filter过滤,在执行过滤方法的时候报错 Error during generated ...

  5. Python字符编码与转换

          需知: .在python2默认编码是ASCII, python3里默认是unicode .unicode 分为 utf-(占4个字节),utf-(占两个字节),utf-(占1-4个字节), ...

  6. 关于RedHat Linux无法使用yum命令安装gcc-c++问题

    初入职场,在给RedHat Linux安装环境的时候遇到这么个问题. 参考:http://www.linuxidc.com/Linux/2017-08/146548.htm [root@localho ...

  7. GitHub 托管的10款免费开源 windows 工具

    GitHub 是如今所有开源事物的中央仓库, 这个网站最近发布了一个叫做<2016 Octoverse  状态报告>,详细列出了从去年起其一系列亮点, 包括总的活跃用户数,最常见的 emo ...

  8. ReactJS之遍历对象的方法

    const obj = { channel: “wevmvmklskdosll12k;0”, index:0 }; Object.keys(obj).map(key => console.log ...

  9. (转)Jquery on()事件委派

    今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一 ...

  10. vue实现动态异步组件

    https://segmentfault.com/a/1190000015080442 https://www.jianshu.com/p/40a364b5e964 <component :is ...