HTML5 classList使用
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使用的更多相关文章
- HTML5 classList API接口
原文地址:HTML5 classList API 原文日期: 2010年07月13日 翻译日期: 2013年08月23日 当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望 ...
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- [转]HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- 权威指南之脚本化jquery
jqury函数 jquery()($())有4种不同的调用方式 第一种是最常用的调用方式是传递css选择器(字符串)给$()方法.当通过这种方式调用时,$()方法会返回当前文档中匹配该选择器的元素集. ...
- 使用HTML5里的classList操作CSS类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...
- html5新增操作类名方式 classList
如果一个元素有多个类名,要如何删除呢,jqeury提供了removeClass()这个api,如果不用插件,自己封装,可以这样 function removeClass(elm,removeClass ...
- HTML5实战与剖析之classList属性
classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名 ...
- HTML5新特性:元素的classList属性与应用
在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, togg ...
随机推荐
- MySQL:(一)
数据库概述 什么是数据库 数据库是一个文件系统.通过标准SQL语言操作文件系统中数据——用来存放软件系统的数据! SQL:Structured Query Language 结构查询语言 常用数据库简 ...
- ubuntu安装QGIS
参考官网https://qgis.org/en/site/forusers/alldownloads.html#debian-ubuntu 但是官网写的太繁琐分散,没有按每个OS集中写cli安装完整过 ...
- 如何让写得html页面自动刷新
一:新建一个文件夹用vscode打开 二:终端输入npm init 然后一路回车会在文件夹中生成一个package.json文件 三:新建个html,在终端中输入cnpm install -g liv ...
- mysql将查询结果导出
一.首先确认当前数据库设置导出是允许的 show variables like '%secure%'; 如果是null则代表不允许,这时可以用命令修改,或者直接修改数据库配置文件my.ini,在其中添 ...
- '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 ...
- docker 中安装 redis
使用以下命令在Docker Hub搜索Redis镜像docker search redis 使用以下命令拉取镜像,Redis的镜像docker pull redis:latest 使用以下命令查看,本 ...
- Java使用Redis--jedis
参考:菜鸟教程 http://www.runoob.com/redis/redis-java.html 1.Java 使用 Redis 开始在 Java 中使用 Redis 前, 我们需要确保已经安装 ...
- linux 常用指令
w 指令可以看到目前接入到服务器的用户(终端)history xx 可以查看本用户(本终端)最后执行的xx条指令last 指令可以查看登录的日志grep "str" filName ...
- 备忘:移植ucos-III到stm32f103c8t6
由于本人对linux系统内核这块比较感兴趣,下一份工作想做linux驱动相关的:于是最近一旦有空都在研究linux内核源码,面对linux内核这个庞然大物,越看越觉得不能太过急躁,且由于还要工作,只能 ...
- pycharm与python环境配置
一.安装python开发环境 在win7的64位系统上安装,然后用cmd命令提示行输入python,出错,网上给出了解决方案,也操作成功了,但是比较麻烦,没关系,安装Anaconda3即可(默认安装即 ...