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. MySQL:(一)

    数据库概述 什么是数据库 数据库是一个文件系统.通过标准SQL语言操作文件系统中数据——用来存放软件系统的数据! SQL:Structured Query Language 结构查询语言 常用数据库简 ...

  2. ubuntu安装QGIS

    参考官网https://qgis.org/en/site/forusers/alldownloads.html#debian-ubuntu 但是官网写的太繁琐分散,没有按每个OS集中写cli安装完整过 ...

  3. 如何让写得html页面自动刷新

    一:新建一个文件夹用vscode打开 二:终端输入npm init 然后一路回车会在文件夹中生成一个package.json文件 三:新建个html,在终端中输入cnpm install -g liv ...

  4. mysql将查询结果导出

    一.首先确认当前数据库设置导出是允许的 show variables like '%secure%'; 如果是null则代表不允许,这时可以用命令修改,或者直接修改数据库配置文件my.ini,在其中添 ...

  5. 'ascii' codec can't decode byte 0xe5 in position 10: ordinal not in range(128)

    python2.7 向Excel中写入数据中含有中文就一直报错 'ascii' codec can't decode byte 0xe5 in position 10: ordinal not in ...

  6. docker 中安装 redis

    使用以下命令在Docker Hub搜索Redis镜像docker search redis 使用以下命令拉取镜像,Redis的镜像docker pull redis:latest 使用以下命令查看,本 ...

  7. Java使用Redis--jedis

    参考:菜鸟教程 http://www.runoob.com/redis/redis-java.html 1.Java 使用 Redis 开始在 Java 中使用 Redis 前, 我们需要确保已经安装 ...

  8. linux 常用指令

    w 指令可以看到目前接入到服务器的用户(终端)history xx 可以查看本用户(本终端)最后执行的xx条指令last 指令可以查看登录的日志grep "str" filName ...

  9. 备忘:移植ucos-III到stm32f103c8t6

    由于本人对linux系统内核这块比较感兴趣,下一份工作想做linux驱动相关的:于是最近一旦有空都在研究linux内核源码,面对linux内核这个庞然大物,越看越觉得不能太过急躁,且由于还要工作,只能 ...

  10. pycharm与python环境配置

    一.安装python开发环境 在win7的64位系统上安装,然后用cmd命令提示行输入python,出错,网上给出了解决方案,也操作成功了,但是比较麻烦,没关系,安装Anaconda3即可(默认安装即 ...