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. S3T mongodb GUI

    下载 cd ~/Downloads wget https://download.studio3t.com/studio-3t/linux/2019.2.1/studio-3t-linux-x64.ta ...

  3. 接口测试工具postman

    一. 安装 1. 免费官网链接:https://www.getpostman.com/postman,下载好后双击.exe程序安装即可 2. 注意事项:建议安装在非系统盘,即C盘以外的盘,路径最好用全 ...

  4. [数据算法]D1.BloomFilter

    BloomFilter是一种高效的去重算法,算法的要义是散列对比. 1.原理 当一个元素加入集合时,判断这个元素是否 2.举例 例如我要对URL去重(这个在爬虫上可以用): URL1 -> 3. ...

  5. 方程的解_NOI导刊2010提高

    方程的解 给定x,求\(a_1+a_2+...+a_k=x^x\ mod\ 1000\)的正整数解解的组数,对于100%的数据,k≤100,x≤2^31-1. 解 显然x是可以快速幂得到答案的,而该问 ...

  6. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  7. warning C4828问题的处理

    在QT的一些项目中,有时候会出现如下警告 warning C4828: 文件包含在偏移 0x215 处开始的字符,该字符在当前源字符集中无效(代码页 65001). (编译源文件 XXXXXXcpp) ...

  8. TPS,并发用户数,吞吐量以及一些计算公式

    TPS,并发用户数,吞吐量以及一些计算公式 基本概念 TPS:每秒同时处理的请求数/事务数 并发数:系统同时处理的请求数/事务数 响应时间:一般去平均响应时间,只有当方差过大时,去90%的响应时间值 ...

  9. 记一次tomcat运行起来了但是项目没起来的问题

    解决办法是: 先是tomcat的conf文件夹下的servel.xml中这两个值改成false. 然后重新运行maven的package打包,再运行项目就行了.

  10. checkbox属性获取

    checked属性获取不能用attr,要用prop