classList 对象(js新增的API)

最新推荐文章于 2023-04-03 17:38:31 发布
最新推荐文章于 2023-04-03 17:38:31 发布
阅读量228 收藏
点赞数 1
分类专栏： classList 文章标签： classList
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bug_small/article/details/95873613
版权

classList 对象(js新增的API)
(DOM对象的属性,改属性指向对象)
在HTML5新API里，页面里的每个DOM节点上都有一个classList对象
可以使用classList对象里面的方法新增、删除、修改及判断节点上的CSS类

在HTML5新API里，页面里的每个DOM节点上都有一个classList对象
可以使用classList对象里面的方法新增、删除、修改及判断节点上的CSS类

classList对象里一些很有用的属性方法：
length 类名个数
item(index) 获取类名
add(class1,class2, …) 添加类
remove(class1,class2, …) 删除类
contains(class) 判断类
toggle(class) 反转类

注意：IE10以下不支持classList对象

按钮

一个块...
Bug_small
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6中set、map、DOM classList的基础用法
qq_65715980的博客
07-18 687
ES6中set、map、DOM classList的基础用法
JS classList API
南方有乔木的博客
03-11 330
JS classList API 介绍 简单来说，就是为了增加/切换/移除 class类新增的API。返回的是元素的类名。本质上是DOMTokenList。 DOMTokenList这种类型表示一组空间分隔的标记。通常由HTMLElement.classList, HTMLLinkElement.relList, HTMLA...
Class类与反射API(一)
天涯芳草
06-09 538
Class与反射API
HTMLCollection元素对象中的classlist方法
m0_64288219的博客
06-24 366
element.classList是HTMLCollection对象中的一个属性方法 element.classList: 返回元素的类名，作为 DOMTokenList 对象。 使用这些方法我们就可以更好的通过类名来操作元素，实现不同效果。尤其是classList.toggle()切换类名方法，实现点击相同元素实现不同效果，可以用在todoLIst上。 这样我们就可以实现点击laji来回变换字体颜色，对todoList很有帮助...
H5新增属性classList
weixin_30357231的博客
04-10 122
H5新增属性classList h5中新增了一个classList，原生js可以通过它来判断获取dom节点有无某个class。 classList是html元素对象的成员，它的使用非常简单，比如 console.log(document.body.classList); 目前已知classList API有length,item,add,remove,toggle,contains len...
Java API 8
02-29
对反射API进行了一些改进，如Class类新增了isDefault()方法，用于判断一个方法是否为默认方法。 Java API 8的这些变化极大地提升了Java的开发效率和代码质量，使得Java更加适应现代软件开发的需求。无论是初学者...
一个MutationObserver类似于CSS选择器的API
08-10
const newClass = mutation.target.classList; // 处理新的class } }); }); observer.observe(element, { attributes: true, attributeFilter: ['class'] }); // 当不再需要观察时 // observer.disconnect(); ...
c# MVC完整项目 EF连接数据库 webapi
02-26
这个完整的项目实例为初学者提供了一个很好的学习平台，涵盖了数据库操作的基本功能，如新增、修改和删除数据。 首先，C# MVC（Model-View-Controller）是一种用于构建可维护性和可测试性的Web应用程序的设计模式。...
jdk api 1.8的开发文档
03-28
方法引用允许直接引用已有方法，例如`Class::new`或`object::method`，这在使用lambda时特别有用，特别是在函数式接口与已存在方法匹配的情况下。 4. **Optional类**： Optional类用于表示可能为null的值，防止空...
JavaScript DOM编程艺术原代码
11-10
6. **样式操作**：学会如何通过JavaScript改变元素的CSS样式，包括直接操作`style`对象和使用`classList`接口添加/移除类名。 7. **事件处理**：理解事件的冒泡和捕获机制，知道如何使用`addEventListener`和`...
list类型放到html,使用HTML5里的classList操作CSS类
weixin_28677451的博客
06-09 120
在JavaScript和JavaScript工具库里征战多年，我经常有这样的遐想：什么时候现代浏览器里能提供一些辅助方法和类库，替代那些JavaScript工具库，比如jQuery，让我们用浏览器原生的方法替代它们。我知道浏览器必定会向这个方向改进，但这个进化过程不会很迅速，而且各种浏览器需要共同做这样的革新，火狐浏览器、谷歌浏览器、特别是IE，只有当这些主流浏览器都具备了这样的功能，我们的愿望才...
es6---classList 属性
muzidigbig的博客
10-21 656
之前我们要操作一个DOM元素的class属性，需要对这个DOM的class进行繁琐的循环判断，而现在HTML5为每个元素定义了classLlist属性，用于在元素中添加，移除及切换 CSS 类。该属性是 DOMTokenList 对象（一个只读的类数组对象），你可以通过DOMTokenList定义的方法对其进行修改。 classList 属性返回元素的类名，作为 DOMTokenList 对象。 classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。 语法：
ES6 Class语法介绍
Leayh
11-28 407
参考文章：ECMAScript 6 入门 概述 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功/能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 举个栗子： // ES5 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toStri...
classList的使用
weixin_48340600的博客
09-28 413
1、返回元素的类名（是一个数组） console.log(div.classList[1]); 2、添加元素类名，是在后面追加类名不会覆盖以前的类名 ，注意前面不需要加. div.classList.add('three'); 3、删除类名 div.classList.remove('one'); 4、切换类（有就去掉，没有就添加） document.body.classList.toggle('bg'); ...
深入学习js的classList
杜永康的博客
04-03 8094
classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；
DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点
m0_73849466的博客
10-31 1104
DOM基础概念，classList属性提供的方法和属性的种类，DOM中节点的操作的方式，追加节点的方式和方法
ClassList属性
a1248001936的博客
04-10 1万+
1.ClassList属性有以下几种方法: (1)通过ClassList可以获取元素的全部类名; (2)通过ClassList.remove()可以删除元素的一个或多个类名; (3)通过ClassList.add()可以向元素添加一个或多个类名; (4)通过ClassList.lentgh可以获取到元素类名的数量; (5)通过ClassList.item(x)可以获取到元素类名索引为x的类名; (6)通过ClassList.toggle可以为元素切换类; (7)通过ClassList.cont
js数组添加对象
热门推荐
weixin_42611825的博客
06-27 4万+
数组添加对象
小程序节点查询的API - wx.createSelectorQuery()。
学习记录
11-27 1万+
官网地址 age({ queryMultipleNodes: function(){//声明节点查询的方法 var query = wx.createSelectorQuery()//创建节点查询器 query query.select('#the-id').boundingClientRect()//这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求...
用微信小程序写一个收货地址和新增地址功能
最新发布
05-10
在 .js 文件中，我们需要定义 `data` 对象用来存储用户的收货地址列表，并在 `onLoad` 方法中调用后端接口获取地址列表。 ```javascript // pages/addressList/addressList.js Page({ data: { addressList: [] }...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值