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. ArcGIS Pro玩转BIM应用浅谈

    基于GIS和BIM的集成和融合能给人类带来的价值将是巨大的,方向也是明确的.在国际范围内,各国的专家学者对智慧城市多持有乐观态度,大力倡导建设.基于BIM和GIS结合的智能城市将是一个成熟技术的融合, ...

  2. openssl 生成pfx

    证书可以通过几种渠道获得, 可以购买, 可以使用IIS生成, 也可以使用Openssl这样的工具生成证书. 本篇文章主要介绍openssl生成pfx文件 首选去网关下载openssl 下载地址:htt ...

  3. 封装json输出

    /** * 输出json * @param $msg * @param int $errno */ protected function printOutError($msg,$errno = 100 ...

  4. 添加“Git Bash Here”到右键菜单

    1.按键盘上的组合键[Win+R]把运行调出来 2.在运行中输入[regedit]再点击确定. 3.定位到HKEY_CLASSES_ROOT\Directory\Background\shell(如果 ...

  5. S3T mongodb GUI

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

  6. Axure文本框验证和外部url的调用

    文本框的验证和外部url的调用: 场景: 当输入文本框中的内容是满足下面条件时:输入4-10的数字,页面会跳转到QQ注册(https://ssl.zc.qq.com/v3/index-chs.html ...

  7. chat聊天系统项目

    项目名称:实现一个在线聊天系统? 一.需求 1. 海量用户在线聊天系统:2. 用户登录注册:3. 根据用户ID或者Nickname搜索并添加用户:4. 动态知道好友上下线:5. 可以创建群并添加好友到 ...

  8. nginx增加第三方模块

    增加第三方模块 ============================================================ 一.概述nginx文件非常小但是性能非常的高效,这方面完胜ap ...

  9. BUAA_OO第一单元作业总结

    BUAA_OO第一单元作业总结 单元任务 第一单元的任务为实现表达式的求导,其中第一次作业是对简单多项式的求导,第二次作业是对包含简单幂函数和简单正余弦函数的多项式的求导,第三次作业是对包含简单幂函数 ...

  10. ie8遇到的那些事

    IE一直是我们津津乐道的浏览器,他的奇葩想必各位在开发之路上都不断的遇到了,其恶心程度就不必说了,我们公司主要是IE的浏览器,这次我就把我遇到的不兼容问题列举下来,欢迎大家补充.此举只发表IE8以上的 ...