开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Vanilla JS -在元素外部切换类

Vanilla JS是指使用纯粹的JavaScript编写代码，而不依赖于任何第三方库或框架。它是一种轻量级的开发方式，可以帮助开发人员更好地理解和掌握JavaScript语言的核心概念和功能。

在元素外部切换类是指通过JavaScript代码在HTML元素的class属性中切换不同的类。这个功能通常用于动态改变元素的样式或行为，以实现交互效果或响应用户操作。

下面是一个示例代码，演示了如何使用Vanilla JS在元素外部切换类：

<!DOCTYPE html>
<html>
<head>
  <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
  </style>
</head>
<body>
  <button id="toggleButton">Toggle Class</button>
  <div id="targetElement">Hello, World!</div>

  <script>
    var toggleButton = document.getElementById('toggleButton');
    var targetElement = document.getElementById('targetElement');

    toggleButton.addEventListener('click', function() {
      targetElement.classList.toggle('red');
      targetElement.classList.toggle('blue');
    });
  </script>
</body>
</html>

在上面的示例中，我们首先定义了两个类.red和.blue，分别设置了不同的颜色样式。然后，通过getElementById方法获取到了一个按钮元素和一个目标元素。接下来，我们使用addEventListener方法为按钮元素添加了一个点击事件监听器。当按钮被点击时，通过classList.toggle方法在目标元素的class属性中切换.red和.blue类，从而实现了颜色样式的切换。

这种在元素外部切换类的功能在实际开发中非常常见，可以用于实现各种动态效果，例如切换菜单的展开和折叠、切换按钮的状态、切换页面的主题等。

腾讯云提供了一系列与云计算相关的产品和服务，其中包括云服务器、云数据库、云存储、人工智能等。具体推荐的产品和产品介绍链接地址可以根据具体需求和场景来选择，可以参考腾讯云的官方文档和网站获取更详细的信息。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript之DOM

一、什么是DOM？ DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 DOM（Document Object Model）是一套

05

HTML5-Classlist样式操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color:red } .green{ color: green; } .blue{ color: blue; }

01

从零开始学 Web 之 HTML5（二）表单，多媒体新增内容，新增获取操作元素，自定义属性

high：被界定为高的值的范围。 low：被界定为低的值的范围。 max：规定范围的最大值。 min：规定范围的最小值。 optimum：规定度量的最优值。 value：规定度量的当前值。

03

前端之BOM和DOM

BOM(Browser Object Model)浏览器对象模型，它使得JS能够与浏览器进行‘对话’（交互，通过JS对页面内容进行操作）。

03

前端之BOM和DOM

BOM和DOM简介 BOM（Browser Object Model）是指浏览器对象模型，它使JavaScript有能力与浏览器进行“对话”。 DOM（Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 Window对象是客户端JavaScropt最高层对象之一，由于window对象是其他大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：documen

05

js2

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

01

前端-part7-jQurey选择定位

1.实现一个弹出框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>我的弹出框</title> <style> * { margin: 0; padding:

04

前端学习笔记之BOM和DOM

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

03

前端-part6-DOM查找标签以及JS操作样式绑定事件

1.location的用法和弹出框处理 location.href // 可以用于获取当前的URL location.href="http://www.baidu.com" // 这种组合可以跳转到指定的页面 alert("这是一个弹出框"); confirm("你确定吗？"); prompt("输入点什么吧"); 2.及时相关的行为 var t1 = setTimeout("alert('对不起, 要你久候')", 3000 ) // 第一个参数代表行为，第二个代表过多久执行这个动作 clearTim

00

js 事件笔记

在Web中, 事件在浏览器窗口中被触发，执行事先绑定的事件处理器（也就是事件触发时会运行的代码块），对事件做出响应。用户在浏览器的任何一个操作都会去触发一个事件，JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。

02

说说几个 API 和应用案例

除了 classList.contains 方法之外，还有一个 node.contains 方法，这个方法返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。语法：

02

html5 新特性

1.querySelector 返回文档中匹配指定css选择器的一个元素. 　　　　注意：uerySelector() 方法仅仅返回匹配指定选择器的第一个元素　　　　　　　　如果你需要返回所有的元素，请使用 querySelectorAll() 　　　　语法：document.querySelector(CSS selectors) 2.getElementsByClassName() 方法返回文档中所有指定类名的元素集合　　　　语法：document.getElementsByClassName

DOM操作笔记

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。

04

「译」如何用原生JS打造一款简易谷歌插件

今天，我打算向你们展示如何用原生JS—-不依靠任何诸如React、Angular或者Vue框架的原生JS做一款谷歌插件。

05

移动端轮播图笔记

移动端浏览器兼容性好，我们不需要考虑以前JS的兼容问题，可以放心使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch(也叫触摸事件)，Android和IOS都有。

02

DOM操作

1.概述 1.1DOM DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理

06

Web Components不依赖前端框架

此文仅做了解，个人觉得web components发展起来还是需要一些时间的，并不着急掌握

03

css补充、JavaScript、Dom

css补充: position: fixed：可以将标签固定在页面的某个位置 absolute+relative：通过两者的结合可以让标签在一个相对的位置代码例子：（通过fixed标签将某些内容固定

08

移除Blog对jQuery的依赖 By HKL, Tues

1.由于博客其实动态功能并不多，而且很多都是多年前完全不懂前端的情况下写的，所以有些功能没有考虑好，现在再看了一下前端代码部分，发现很多DOM操作已经完全没有必要去用jQuery了，以后再加新功能也不会用到jQuery的特性，所以计划改写jQuery部分为原生javascript。

04

20.DOM

定义文档对象模型（Document Object Model）是一种用于HTML和XML文档的编程接口。查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭