element.classList.toggle('myClass');// 切换单个类名// 如果元素原本有 'myClass',则移除它;如果没有,则添加它element.classList.toggle('myClass',true);// 强制切换单个类名element.classList.toggle('myClass',false);// 强制切换单个类名 4,替换类名 replace(oldClass, newClass):替换元素的一个类...
现在可以使用 classList.add 、 classList.remove 、 classList.toggle 、classList.replace 、classList.contains 等原生JS方法。 Element.classList是一个只读属性,返回一个元素的类属性的实时 DOMTokenList 集合。 相比将element.className作为以空格分隔的字符串来使用,classList是一种更方便的访问元素的类列表的方...
classList.contains()为判断是否有这个class类名,如: console.log(div1.classList.contains('c1')); 输出结果:true contains()里面只能放一个类名,放多个会把你所写的东西看作一个整体 classList.toggle()能够帮我们切换类,即如果有就给你删除,没有就给你添加,如 第一种:div1.classList.toggle('c1'); ...
在事件处理程序中,我们将使用classList.toggle()方法来切换列表项的展开或折叠状态。 functiontoggleItem(){this.classList.toggle('expanded');} 1. 2. 3. 上述代码中,this关键字表示当前被点击的列表项,classList属性是一个DOMTokenList对象,它包含了元素的所有类名。toggle()方法用于切换元素的类名,如果元素已...
使用classList.toggle()方法来切换类。该方法可以在元素的类列表中添加或移除指定的类。在这种情况下,我们可以使用该方法来切换两个 div 元素的类。 下面是一个示例代码: 代码语言:javascript 复制 // 获取两个 div 元素vardiv1=document.getElementById('div1');vardiv2=document.getElementById('div2');/...
classList 是一个 DOM 属性,它返回一个元素的类名集合,并提供了一系列操作这些类名的方法。常用的方法包括: add(className):添加一个类名 remove(className):移除一个类名 toggle(className):切换一个类名(如果类名存在则移除,否则添加) contains(className):检查是否包含某个类名 基本用法 示例: <!DOCTYPE htm...
div.classList.toggle("visible", i < 10); alert(div.classList.contains("foo")); //添加或删除多个类 div.classList.add("foo","bar"); div.classList.remove("foo", "bar"); 兼容性 不兼容Android2.3和iOS4.2的,在移动端上想使用也是有点头疼啊。IE系列的更别说IE9和IE8了。所以目前来看,还是...
toggle(className): 切换元素的类名。如果类名存在,则移除;如果类名不存在,则添加。 contains(className): 检查元素是否包含指定的类名。返回一个布尔值。 replace(oldClass, newClass): 替换元素的类名。将指定的旧类名替换为新类名。 使用classList属性调用内部变量的示例代码如下: ...
更新: 针对评论, classList.toggle 是一个纯 javascript 解决方案。正如一条评论所暗示的那样,它与 jQuery 无关。如果需要支持旧版本的 IE,那么在下面的 MDN 链接中有一个 shim (pollyfill)。如果需要,这个垫片远远优于公认的答案。 使用classList.toggle 显然是最简单的解决方案。另请参阅 Can I Use classLis...
document.body.classList.toggle('day-mode'); }); // 初始化模式为白天模式 document.body.classList.add('day-mode'); }); 通过以上步骤,我们已经成功实现了一个可以在白天和黑夜模式之间切换的网页。通过HTML结构、CSS样式和JavaScript代码的配合,用户可以轻松地在不同模式之间切换,从而提升用户体验。这个功能...