es6---classList 属性

之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类。该属性是 DOMTokenList 对象(一个只读的类数组对象),你可以通过DOMTokenList定义的方法对其进行修改。

classList 属性返回元素的类名,作为 DOMTokenList 对象。

classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。

语法:

 element.classList

属性:

length;    返回类列表中类的数量,该属性是只读的

方法:

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

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

 element.classList.item(index);   返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null

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

 element.classList.toggle(class, true|false);   在元素中切换类名。
    第一个参数为要在元素中移除的类名,并返回 false。
            如果该类名不存在则会在元素中添加类名,并返回 true。
    第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。例如:
            移除一个 class: element.classList.toggle("classToRemove", false); 若不存在,不会报错;返回false
            添加一个 class: element.classList.toggle("classToAdd", true); 若存在,不会重复添加;返回true

    注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值