原生js—classList.add()、classList.remove()

最新推荐文章于 2024-05-30 10:10:30 发布
最新推荐文章于 2024-05-30 10:10:30 发布
阅读量1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kimser/article/details/107082583
版权

原生js——操作类名（HTML5新增classList）

  • classList.add( newClassName )；

添加新的类名，如已经存在，取消添加

  • classList.contains( oldClassName );

确定元素中是否包含指定的类名，返回值为true 、false；

  • classList.remove( oldClassName )；

移除已经存在的类名;

classList.toggle( className )；

如果classList中存在给定的值，删除它，否则，添加它；

classList.replace( oldClassName，newClassName )；

类名替换
来看几个例子：
有一个div
 

Kimser
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端项目-classlist.zip
09-03
2. **方法映射**：定义四个核心方法（`add`、`remove`、`toggle`和`contains`），并确保它们的行为与原生`classList`接口一致。 3. **兼容性检查**：在初始化时检测当前浏览器是否原生支持`classList`，如果不支持，...
使用HTML5里的classList操作CSS类
09-27
HTML5的classList属性是JavaScript与DOM交互的一个重要增强，它为元素节点提供了操作CSS类的原生API。这个API使得开发者可以直接、高效地管理元素的类名，而无需依赖于像jQuery这样的库来处理此类任务。classList...
JS 对classList添加、删除、修改、替换
MFWSCQ的博客
05-23 8730
Element.classList是一个只读属性，返回一个元素的类属性的实时DOMTokenList集合。 相比将element.className作为以空格分隔的字符串来使用，classList是一种更方便的访问元素的类列表的方法。 语法： const elementClasses = elementNodeReference.classList; 返回值 elementClas...
原生js—classList.add()、classList.remove()、classList.contains()、classList.toggle()、
热门推荐
代码小宝宝的博客
02-21 4万+
原生js添加、移除类名（HTML5新增classList） classList.add()； 添加新的类名，如已经存在，取消添加 classList.contains(); 确定元素中是否包含指定的类名，返回值为true 、false； classList.remove()； 移除已经存在的类名; classList.toggle()； 如果classList中存在给定的值，删除它，否则，添加它...
JS classList追加，删除，切换类样式（add, remove , toggle）
最新发布
m0_75166176的博客
05-30 133
【代码】JS classList追加，删除，切换类样式（add, remove , toggle）
原生js—classList.add()、classList.remove()、classList.contains()、classList.toggle()
orange_girls的博客
07-07 716
classList
JS classList.add和className
wwy6191的博客
09-29 481
classList是直接修改一个节点的类名，classList.add()则是添加一个类名，对之前的内容不做修改。
原生js封装添加class,删除class的实例
11-28
此外，对于某些场景，如动态添加或删除class，可以考虑使用`classList`接口，它提供了更直观和简洁的方法，如`classList.add()`, `classList.remove()`等。 总之，通过封装`addClass`和`removeClass`函数，我们可以...
classList:为IE8扩充classList特性
05-25
在这个场景下，我们可以为 `HTMLElement.prototype` 添加一个新的属性 `classList`，并定义其 `get` 和 `set` 方法，以及相关的方法如 `add`, `remove`, `toggle` 和 `contains`。 以下是一个简单的示例，展示了...
system-to-list-class:....创建...
05-07
标题中的“system-to-list-class”很可能是指一个项目或库，它定义了一个名为SystemToListClass的类，旨在为处理列表提供一种系统化的方法。这个类可能包含了各种实用方法，如添加元素、删除元素、排序、搜索等，...
原生js操作元素类名(classList,classList.add...)
Dcripple的博客
10-23 2973
1、classList classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类) length:返回类列表中类的数量，该属性是只读的 <style> .lis { width: 200px; height: 100px; background-color: skyblue; } .box { width: 100px;
javascript中类名的操作方法classList.add(),classList.remove(),classList.toggle(),classList.contains()
m0_47892636的博客
03-24 445
javascript中类名的操作方法
classList.add() ,classList.contains(),classList.remove(),classList.toggle()
weixin_42270374的博客
07-09 2311
HTML5新增classList classList.add(newclass); 添加新的类名 classList.contains(oldClassName); 确定元素中是否包含指定的类名，返回值为true 、false； classList.remove( oldClassName )； 移除已经存在的类名 classList.toggle( className )； 如果classList中存在给定的值，删除它，否则，添加它； classList.replace(...
原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()
陈坚泓的博客
12-03 4493
原生js操作元素类名classList.add( newClassName )；classList.contains( oldClassName );classList.remove( oldClassName )；classList.toggle( className )； classList.add( newClassName )； 添加新的类名，如已经存在，取消添加 classList.co...
深入学习js的classList
杜永康的博客
04-03 8306
classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；
js list添加元素_第6部分-1：JS-Web-API DOM元素
weixin_39961943的博客
12-03 406
一、DOM1、DOM，即文档对象模型（Document Object Model ）2、通过在页面——打开：检查元素——看见：元素为可折叠。可选中页面对应元素，事实上即选择了对象（即也选择了对象对应的属性或方法），相当于把页面文档对象化。事实上，就是用js手段调用操作该文档（即一个对象）。二、Document对象，属性（或方法）在DOM中最常用的对象就是：document对象（页面——检查，即查看...
JS基础篇--HTML DOM classList 属性
weixin_34234829的博客
02-11 142
页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。 添加类（add） document.getElementById("myDIV").classList.add("mystyle"); 为 &lt;div&gt; 元素添加多个类: d...
classList介绍和原生JavaScript实现addClass、removeClass等
leadn的博客
12-27 7220
使用jQuery可以给元素很方便的添加class和删除class等操作，现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除class、查询class等。 语法： let elementClass = element.classList; elementClasses 是一个 DOMTokenList 表示 element
帮我分析下下面代码的结构跟实现技术 <div id="cd-icon"> <div class="cd-img"></div> <div class="music-list"> <ul> <li class="song">歌曲1</li> <li class="song">歌曲2</li> <li class="song">歌曲3</li> </ul> </div> </div> <audio id="audio" src="./audio/music1.mp3" autoplay></audio>/* js */ // 音乐唱片 (function () { const cdIcon = document.getElementById('cd-icon'); const cdImg = document.querySelector('.cd-img'); const musicList = document.getElementsByClassName('music-list'); const audio = document.getElementById('audio'); let isPlaying = false; const musics = [ './audio/music1.mp3', './audio/music2.mp3', './audio/music3.mp3', ]; let currentSongIndex = 0; console.log(musicList[0].classList); function playSong() { audio.src = musics[currentSongIndex]; audio.play(); let songElements = document.querySelectorAll('.song'); songElements.forEach(function (songElement) { songElement.classList.remove('cur-song'); }); songElements[currentSongIndex].classList.add('cur-song'); } cdIcon.addEventListener('mouseover', function () { musicList[0].classList.add('show'); }); cdIcon.addEventListener('mouseout', function () { musicList[0].classList.remove('show'); }); cdImg.addEventListener('click', function () { if (isPlaying) { audio.pause(); } else { audio.play(); } }); musicList[0].addEventListener('click', function (e) { if (e.target.tagName === 'LI') { let index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target); currentSongIndex = index; playSong(); } }); audio.addEventListener('play', function () { isPlaying = true; cdImg.classList.add('playing'); }); audio.addEventListener('pause', function () { isPlaying = false; cdImg.classList.remove('playing'); }); audio.addEventListener('ended', function () { currentSongIndex++; if (currentSongIndex >= musics.length) { currentSongIndex = 0; } playSong(); }); playSong(); })();
06-09
这段代码实现了一个音乐播放器的功能，包括了音乐唱片的旋转效果，歌曲列表和播放控制等功能。...实现技术主要采用了原生的 JavaScript 和 HTML5 的 audio 标签，同时使用了 CSS3 实现了唱片图片的旋转动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值