CSS样式中的classList.toggle的用法

于 2024-06-10 17:00:47 发布
阅读量477 收藏 1
点赞数 6
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo3283574272/article/details/139578854
版权

classList: 是该元素的一个属性，它提供了一个接口来添加、删除或切换元素的类。

toggle:该方法会检查元素是否已经有指定的类。

下面是一个简单的事例：

      html代码

     js代码

 当你点击 boxesContainer div时，它的类会从 'small' 切换到 'big' 和 'small' 之间。如果元素已经有 'big' 类，它将被移除，元素的尺寸将变回100x100px的红色方块；如果元素没有 'big' 类，它将被添加，元素的尺寸将变为200x200px的蓝色方块。

软萌小雲
关注
CSS toggle() 伪类进阶指南
分享身边生活经验blog
04-06 632
2022 年 4 月中旬，Chromium 宣布将开始与 CSS Toggles 的兼容性进行原型设计，这是一项新的 CSS 功能，目前仅作为非官方草案提供。CSS Toggles 是一种声明性机制，如何在 Windows 中禁用（和启用）用户帐户用于将“可切换值”与元素相关联，以及设置和修改该值。您还可以在 CSS 的选择器中使用 CSS Toggles 来选择一个元素，如何在 Windows 10 PC 上获取 Android 通知以进行样式设置或添加交互性。草稿中包含一个。
classList属性配合内置方法add()、remove()、toggle()，添加或删除某个类，以此改变CSS样式
Julienling的博客
04-04 2647
改变某HTML元素样式，有多种方法，各有优缺。推荐方法二：通过添加或切换元素的类来改变其样式。 方法一：改变内联样式 优点： 不需要考虑兼容性； 代码量少； 缺点： 每执行一句element.style.styleName = " ";，都会重新进行一次整个页面的渲染，在网络拥堵的情况下效果巨差，不符合异步更新策略。因此不推荐使用。 <style> .b1{ width:100px; height:100px; backgr
classList.toggle方法
qq_43244452的博客
07-08 9505
这个方法可以给dom元素添加类，消除类。 如下面代码片段，当点击toggle标签时，会给这个标签添加和消除“is-open”类 toggle.addEventListener("click", function (e) { e.preventDefault(); dropdown.classList.toggle("is-open"); }); ...
JavaScript 21 ，CSS 2 ，JavaScript中的classList.toggle()方法和CSS自定义属性var，使用详细（css中var变量怎么应用）
weixin_65793170的博客
06-25 4136
⭐CSS变量（也称为自定义属性）引入了一种在CSS中定义和使用可重用值的方法。这些变量可以用来存储颜色、尺寸等常量，从而在整个样式表中保持一致性和易于维护的特点。通过使用var()函数，我们可以轻松地在多个地方引用同一个值，减少了重复代码，并且可以在一处修改后自动更新所有引用该变量的地方。 而JavaScript的classList.toggle() 方法提供了一种简洁的方式来添加或移除元素的类名。这个方法特别适用于那些需要频繁切换状态的情况，比如激活按钮、显示隐藏内容或是切换主题模式。通过简单的调用，即
前端每日实战：5# 视频演示如何用 CSS 创作一个立体滑动 toggle 交互控件
weixin_34352449的博客
04-27 190
效果预览 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cPvM...
JS（ie10以上/移动端）用classList.toggle做开关灯效果
weixin_72322475的博客
09-18 937
JS（ie10以上/移动端）用classList.toggle做开关灯效果
关于Java Script的DOM操作classList.toggle()在vue.js中的切换使用与无法切换的问题，及其思考与解决
m0_72159389的博客
05-13 1027
个人小练习的小小体会，classList.toggle()在vue.js中的切换使用与CSS样式内联表的顺序问题
14.用.classList添加.删除.替换.查找.开关,元素属性
lazylYYY的博客
08-14 350
一：案例：我们希望点击按钮的时候，a的宽高均变成400px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-
.classList.toggle 是什么
06-10
`.classList.toggle` 是 JavaScript 中一个用于切换元素类的方法。它会检查元素是否已经有指定的类，如果有，...在事件处理程序中，我们使用 `classList.toggle()` 方法切换元素的 `my-class` 类，从而添加或删除样式。
详解使用HTML5的classList属性操作CSS类
09-28
使用`classList.add()`方法可以向元素添加一个或多个类。例如： ```javascript document.getElementById("myDIV").classList.add("mystyle"); ``` 这将在指定的元素上添加名为`mystyle`的CSS类。 2. **删除类*...
可作为Web组件的纯CSS切换Toggle按钮
08-10
可作为Web组件的纯CSS切换(Toggle)按钮
css-toggle:CSS Toggle 规范的提案
07-23
css-切换 CSS Toggle 规范的提案
CSS使用classList实现两个按钮样式的切换
09-27
值得注意的是，classList还有`toggle()`方法，它可以在存在时移除类，不存在时添加类，这也可以用于简化上述代码，但为了保持清晰的逻辑，这里没有使用。 总结来说，这个示例展示了如何使用CSS和JavaScript（特别是...
jquery+css3实现列表toggle特效.zip
11-19
本示例"jquery+css3实现列表toggle特效.zip"是关于如何使用这些技术来实现一个交互式的列表切换效果，这种效果常见于菜单、折叠面板或者显示/隐藏内容的场景。以下是对这个主题的详细说明： 首先，jQuery是一个强大...
var body = document.querySelector('body'); body.classList.toggle('dark-mode');这两句js代码什么意思
最新发布
09-24
3. `.toggle('dark-mode')`是`classList`对象的一个方法，用于切换元素的类名。这里的参数`'dark-mode'`表示要切换的类名，即在`body`元素的类名中添加或移除`'dark-mode'`。 综上所述，这两句代码的作用是切换网页...
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
前端每日实战：156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件...
weixin_33767813的博客
10-15 167
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/p/pE...
原生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中存在给定的值，删除它，否则，添加它...
只用css3实现菜单的toggle效果
lihaofeifei的博客
10-29 1522
一、原理: 使用label与input来实现，label和复选框是有关联的,label的for属性对应的是input的id,所以点击label时,它就会勾选或取消复选框。 如果我们需要让菜单默认显示,只需要将input的checked属性设为true即可。 因为用到了css3的：checked属性，因此只适用于IE9+浏览器。 label可以设置为displ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值