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. 垂直对齐:vertical-align:super属性

    <p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...

  2. Linux中的wheel用户组是什么?

    在Linux中wheel组就类似于一个管理员的组. 通常在Linux下,即使我们有系统管理员root的权限,也不推荐用root用户登录.一般情况下用普通用户登录就可以了,在需要root权限执行一些操作 ...

  3. php安全开发(1)文件包含漏洞

    开发过程总结的漏洞: 一,,如何造成包含漏洞:在通过函数包含文件时,由于没有对包含的文件名进行有效的过滤处理,被攻击者利用从而导致了包含了Web根目录以外的文件进来,就会导致文件信息的泄露甚至注入了恶 ...

  4. NetSec2019 20165327 Exp6 信息搜集与漏洞扫描

    NetSec2019 20165327 Exp6 信息搜集与漏洞扫描 一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 ...

  5. Javascript回调函数中的this指向问题

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...

  6. redis 持久化文章分析的很到位

    https://baijiahao.baidu.com/s?id=1611955931705092609&wfr=spider&for=pc

  7. js中的forEach/map方法

    // forEach方法 var data = [{ name: "程咬金", sex: "1", age: 26 }, { name: "程才&qu ...

  8. RK3288 GPIO

    简介GPIO, 全称 General-Purpose Input/Output(通用输入输出),是一种软件运行期间能够动态配置和控制的通用引脚.RK3288有9组 GPIO bank: GPIO0,G ...

  9. As The End of The Year Approaches,The Weighted Blanket Season Begins

    Weight blankets are well known for anxiety, insomnia, depression and so on. It is physical therapy, ...

  10. java接口特性

    java接口特性 (1)接口可以被实例化 ,常作为类型使用 (2)实现类必须实现接口的所有方法 ,抽象类除外 (3)实现类可以实现多个几口   java中的多继承 (4)接口中的变量都是静态变量