一 对classList整体感觉

  浏览器支持参考(http://www.runoob.com/jsref/prop-element-classlist.html)

  

classList 是一个对象 ,返回值:一个 DOMTokenList, 包含元素的类名列表

 语法:element.classList

有一个属性 length  只读

 方法:

  1.add(class1, class2, ...) 在元素中添加一个或多个类名。 如果指定的类名已存在,则不会添加

  2.remove(class1, class2, ..) 移除元素中一个或多个类名。注意: 移除不存在的类名,不会报错。

  3.contains(class) 返回布尔值,判断指定的类名是否存在。

  4.item(index)  index :在元素l类中的索引值。如果索引值在区间范围外则返回 null

  5.toggle(class, true|false)

    第一个参数为要在元素中移除的类名,并返回 false。 
    如果该类名不存在则会在元素中添加类名,并返回 true。

  

给不支持classList的浏览器(ie9以及以下等)的元素添加classList属性

  也是找了下面资料 测试没问题

 参考 https://blog.csdn.net/qq_18271353/article/details/53893664 

//添加数组 兼容ie8 IndexOf方法
if (!Array.prototype.indexOf){
Array.prototype.indexOf = function(elt /*, from*/){
var len = this.length >>> 0; var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len; for (; from < len; from++){
if (from in this && this[from] === elt)
return from;
}
return -1;
};
} if (!("classList" in document.documentElement)) {
alert('浏览器不支持')
var ele = window.HTMLElement || Element;
Object.defineProperty(ele.prototype, 'classList', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/\s+/g),
index = classes.indexOf(value); fn(classes, index, value);
self.className = classes.join(" ");
}
} return {
add: update(function(classes, index, value) {
if (!~index) classes.push(value);
}), remove: update(function(classes, index) {
if (~index) classes.splice(index, 1);
}), toggle: update(function(classes, index, value) {
if (~index)
classes.splice(index, 1);
else
classes.push(value);
}), contains: function(value) {
return !!~self.className.split(/\s+/g).indexOf(value);
}, item: function(i) {
return self.className.split(/\s+/g)[i] || null;
}
};
}
});
} document.getElementById('jj').classList.add('color_1');
document.getElementById('jj').classList.add('fs24');
document.getElementById('jj').classList.add('bd_R');

  

对JS 的classList 简单记录的更多相关文章

  1. mock js使用方法简单记录

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  3. 灵活使用 console 让 js 调试更简单

    摘要: 玩转console. 原文:灵活使用 console 让 js 调试更简单 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Web 开发最常用的就是 console.log , ...

  4. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  5. JSP简单记录

    JSP,全称是Java Server Page,是运行在服务器端的页面,是建立在Servlet规范的动态网页技术,JSP文件在第一次请求时,会被编译成Servlet,所以JSP也可以看成是运行中的Se ...

  6. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  7. [转]九个Console命令,让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

  8. JS实现的简单横向伸展二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

随机推荐

  1. Modbus通讯数据格式:

    RTU&&TCP单个写入 RTU&&TCP多个写入 RTU&&TCP数据读取 ASCII码数据格式 Modbus功能码: 功能码 名称 作用 1 读取线 ...

  2. Linux下的sudo及配置

    sudo的常用命令 man sudoers # 参阅帮助 visudo # 编辑sudoers文件的命令 sudo -l # 查看可执行或禁止执行的命令 sudo -u user1 /bin/ls # ...

  3. Apicloud学习第三天——获取云数据库的数据方法

    apicloud学习30天中的对用进行注册和登录以及数据的获取的代码,在apicloud中有单独的api对用户的增删查改进行操作,这里写下增加和查询. 增加用户数据 var model=api.req ...

  4. OA系统开发人事模块关于请假跨月的处理

    前言:其实对于跨月的数据单独处理是不难的,但是对于后台显示页面,肯定不是单纯拼接一个where条件的,因此在我的项目也是如此,并不能够用普遍的方法来处理,此时就想尽量用简单的方法来处理跨月数据的准确性 ...

  5. Web_0002:关于MongoDB的操作

    1,启动moggdb服务端 打开cmd命令窗口进入到MongoDB的安装目录bin文件下: 如:  cd /d F:\Program Files\mongodb\bin   执行如下命令(该命令窗口为 ...

  6. 080、Weave Scope 容器地图(2019-04-28 周日)

    参考https://www.cnblogs.com/CloudMan6/p/7655294.html   Weave Scope 的最大特点是会自动生成一张 Docker 容器地图,让我们能够直接的理 ...

  7. Python的安装及小程序练习

    Python 1.Python的安装教程 (1)进入Python官网 (2)双击Python-3.6.4.exe安装程序,勾选Add Python 3.6 to PATH (3)选择自定义安装. (4 ...

  8. Now you can provide attr "wx:key" for a "wx:for" to improve performance. 微信小程序警告

    Now you can provide attr "wx:key" for a "wx:for" to improve performance为警告,不处理不影 ...

  9. TypeScript 错误property does not exist on type Object

    TypeScript 错误property does not exist on type Object 在TypeScript中如果按JS的方式去获取对象属性,有时会提示形如Property 'val ...

  10. 论文笔记:Learning wrapped guidance for blind face restoration

    这篇论文主要是讲人脸修复的,所谓人脸修复,其实就是将低清的,或者经过压缩等操作的人脸图像进行高清复原.这可以近似为针对人脸的图像修复工作.在图像修复中,我们都会假设退化的图像是高清图像经过某种函数映射 ...