开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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类，从而实现了颜色样式的切换。

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

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

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

有帮助

没帮助

相关·内容

在JS数组指定位置插入元素

规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。...要添加到数组的新元素返回值 Type 描述 Array 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。...( array_1.unshift(1,2) + '' ); document.write( array_1 ); 运行该例子，输出： 5 1,2,a,b,c 注意在...实例例子 1 在本例中，我们将把 concat() 中的参数连接到数组 a 中： var a = [1,2,3]; document.write...( a.concat(4,5) ); 输出： 1,2,3,4,5 例子 2 在本例中，我们创建了两个数组，然后使用 concat() 把它们连接起来： <script type

6.1K0 0

JS-获取class类名为某个的元素-【getClass】函数封装

原理：根据class获取元素. 原理是，取出oparent下的所有元素，组成数组，然后遍历类名，全等判断。...其实直接用getElementsByTagName获取到的也是一个元素集合。现在直接等于一个数组，能用的方法和属性则更多了呢！顺便调用函数并传参。参数是父元素的变量和需要找的类名。...for(var i=0;i<oLi.length;i++){ //循环弹出来的数组，也就是所有类名为“li_box”的li //接下来直接做你想让那些带你需要类名的元素该做的事。...，还有别的className，那么之前的程序是做不到的，所以用split把元素上的类名切开来，再进行对比。...这里，在boxArr.push那里，原来想错了，写的classNameArr[j]，后来发现，boxArr最后是一个字符串数组，并不是元素数组，所以改成oElements[i]就可以了。

5K8 0

js判断元素在某个区域内是否可见（转）

getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置...getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。...right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。 getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准。...var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop; getBoundingClientRect判断元素是否在可视区域...以前的办法是通过各种offset判断元素是否可见，网上很多教程，大家可以自己去查找。

7.5K2 0

【说站】js数组在头部或尾部插入元素的方法

js数组在头部或尾部插入元素的方法 1、unshift()在数组开头插入元素，把一个或多个参数值附加到数组的头部。...array.unshift(元素1, 元素2, ..., 元素X) 实例 var a = [0]; //定义数组 console.log(a); //返回[0] a.unshift(1,2); ...array.push(元素1, 元素2, ..., 元素X) 3、concat()将作为参数的一个或多个数组的元素添加到指定数组的尾部。可以连接两个或多个数组。...var a = [1,2,3]; var b = [4, 5, 6]; var c = [7,8]; var d = a.concat(b,c); console.log(d); 以上就是js数组在头部或尾部插入元素的方法...更多js学习指路：js教程推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

3.1K2 0

Vanilla JS——最轻快的JavaScript框架

核心功能; DOM(遍历/选择器); 基于原型的对象系统; AJAX; 动画; 事件系统; 正则表达式; 函数作为第一类对象; 闭包; 数学库; 数组库; 字符串库开始使用 Vanilla JS是世界上最轻量的...javascript 框架，浏览器向站点发送请求前就已经把Vanilla JS加载在浏览器里了。...使用Vanilla JS只需在应用的HTML里加入这行：当你部署你的应用的时候，使用这个更快的方法：没错！...没有任何代码，Vanilla JS 太流行了，所有的浏览器在十年前就已经内置了它。...性能比较根据ID获取DOM元素框架代码次数/秒 Vanilla JS document.getElementById('test-table'); 12,137,211 Dojo dojo.byId

6K4 0

js操作DOM在父元素中的结尾添加子节点注意

impressionHtml=``; document.getElementById("wrapper").appendChild(impressionHtml); js...向父元素wrapper中的末尾添加定义好的html，报错： Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter...在stackoverflow上找到很好的一个解释： ? 所以js是不能直接传入字符串的，但是jquery的append可以直接传入html字符串。

9.8K4 0

在浏览器里引入外部js计算字符串的md5

需求在测试系统功能是，遇到一个需要计算md5的问题；计算Md5的方法有很多：使用互联网提供的页面；敲代码实现但是最简单的还是在浏览器里做运行；实现首先需要一个计算md5的功能实现；有现成的js文件；https...://cdn.staticfile.org/blueimp-md5/2.12.0/js/md5.min.js然后打开浏览器，按F12，选择console；输入如下代码来引入外部js;var script...= document.createElement('script');script.src = "https://cdn.staticfile.org/blueimp-md5/2.12.0/js/md5....min.js";document.getElementsByTagName('head')[0].appendChild(script);点击回车；图片然后就可以使用md5函数了；图片

1.4K2 0

没想到吧，PHP 中在类的外部也可以调用私有方法！

一般来说，在 Class 的外部是无法调用私有方法，这也是 Private 字面的意思，但是一些很特殊很特殊的情况下，如果需要调用，是否可以呢？其实可以使用类的反射来实现。

9963 0

Github 移除 JQuery 的过程

实现CSS类名切换； CSS现在支持在样式表而不是JavaScript中定义可视化动画； $.ajax请求可以使用Fetch标准执行； addEventListener（）接口足够稳定，可以跨平台使用；...作者希望在这个页面上有一个或多个js小部件元素吗？另外，如果我们更新了页面标记，并且意外地漏掉了js小部件的类名，浏览器中的异常是否会通知我们出了问题？...增量解耦即使有了最终目标，我们知道仅仅分配所有资源是不可行的，我们必须重写从jQuery到vanilla JS的所有内容。...许多旧代码都与pjax和facebox jQuery插件的外部接口有显式耦合，因此我们保持了它们的接口相对相同，而在内部使用vanilla JS替换了它们的实现。...因此，即使那些使用JS增强的web表单和其他UI元素通常也会在浏览器中禁用JavaScript。在某些情况下，我们能够完全删除某些遗留行为，而不必在vanilla JS中重写它们。

2.1K1 0

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

前言关于讲解 JS 的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。...modal','#modal'); 拖拽问题整个拖拽功能并没有太大的问题，但是如果我们拖拽关闭按钮，仍然可以拖拽整个 modal，看起来不太和谐而且在某些情况下会影响功能，所以我们需要排除掉关闭按钮。...解决的方法就是在拖拽开始时添加限制条件，代码如下 ......因为我们在排除特定元素的同时也要排除它的子元素。如果使用原生 JS 的话，需要添加获取子元素的方法。...仍然是之前的老话，实现一个功能并不困难，但是如果要把这个功能做好，我们需要考虑很多的细节，或许很多时候我们都把时间花费在调整细节上了。

4.8K9 0

如何制作自己的原生 JavaScript 路由

最重要的是，使用 vanilla JS router 可以减少你对框架的依赖。只要你了解实现它所涉及的所有部分，就可以相对容易的在原生 JavaScript 中创建自己的路由。...JavaScript 的 History API 我看过很多没有提到 JavaScript History API 的 vanilla JS router 教程。....length 属性是会话历史记录中的元素数。 .state 属性用于查找状态，而无需侦听**“ popstate” **事件。现在开始实现我们自己的原生 JS 路由！...基于 History API 的 Vanilla JS 路由设置先让我们仔细研究构建 URL 切换器所需的最少代码（而无需刷新页面），然后我会向你展示其的工作方式的 GIF 动图。...我们只需将存储在元素的 id 属性中的 clicked 元素的 id 传递给它即可：home，about，gallery 等。它们应与你要导航到的实际页面一致。

3.8K2 0

CSS in JS 新秀：vanilla-extract 浅析

前言 2021年，vanilla-extract 作为黑马登顶了 css-in-js 满意度榜首（虽然使用率仅为1%)，号称是一个类型安全、高度兼容 TS 场景的库，国内相关讨论还很少，稍微看了一下还挺好用的...这样的设计，我觉得更是一种职责分离吧，每个样式块都针对某个元素，那么对于项目而言，样式的可维护性就大大提高了，相比于其他css in js（styled-components）就不容易出现样式冗余的问题...对于一些特殊情况，比如：在写styled-components我们会利用其包裹arco组件（或是其他组件），然后对其内部元素样式进行覆写或是新增。...const StyledSelect = styled(Select)` div { color: red; } ` 那么在vanilla-extract样式块里是不能直接做到的...总结目前了解下来，vanilla-extract是一个总体还不错的css in js库，虽然目前使用率比较低，但是后续厂商平台项目会考虑在一些地方使用看看效果（毕竟不会增大js体积）。

2K1 0

不敢相信，技术栈，居然被P站秒了

画外音，页面性能监控，常见的有两种方式：（1）模拟性能监控主要通过外部代理，模拟真实用户行为（登陆，点击等），执行固定监控脚本，收集页面性能数据。这是国内主流页面性能监控方式。...JS层面，我们逐步淘汰了jQuery和jQuery UI，而使用Vanilla JS这款更加高效的JS框架。画外音：Vanilla JS，世界上最轻量级的JS框架，没有之一。...其官方网站是： http://vanilla-js.com/ 别的JS库都需要显示引用地址，例如：而Vanilla JS不需要任何引用，在部署引用的时候，只需要：你没看错，没有任何代码，由于它过于流行，所有的浏览器都必须内置它。...（2）你用过Vanilla JS么？

1.7K1 0

前端食堂技术周刊第 60 期：TypeScript 4.9、Ant Design 5.0、Node.js 安全最佳实践

2.Ant Design 5.0[3] 设计升级增加了 4 类新组件和 4+ 变体组件；组件默认样式全面升级。...Tree Shaking，在 v5 你不在需要使用 babel-plugin-import 摘除未使用到的样式。...技术资料 1.用 vanilla-extract 编写高性能的 CSS[4] 一篇 vanilla-extract 入门指南的长文。...2.4 个必要的可访问性测试[5] 文章中提出的测试包括颜色对比度、互动元素颜色对比、键盘互动以及焦点的可访问性。...NGux3r0P1JJH_z4-vfeksQ [16] DEX 周刊: https://newsletter.dex.group/ 公众号：前端食堂知乎：童欧巴掘金：童欧巴这是一个终身学习的男人，他在坚持自己热爱的事情

9582 0

热点面试题：JS 如何判断一个元素是否在可视区域内？

JS 如何判断一个元素是否在可视区域内？...393.59375, // left: 333, // right: 1017, // top: 162.625, // width: 684 // } // A: // 如果一个元素在视窗之内的话...- 1 取值， // 1 表示完全被包含 threshold: 1.0, root:document.querySelector('#scrollArea') // 必须是目标元素的父级元素...initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.<em>js</em>

1521 0

JS简史

还包括了一个智能化的JS调试工具，从而让这门语言的调试接近于传统的编译型语言调试方法(在从前，开发者只能依赖于浏览器插件或外部程序做到这些)。现在大部分主流浏览器都原生提供了类似的能力。...当你只想监听几个按钮以及切换 tab 的时候，用大量现代 JS 框架组成的好得很的单页应用就过于复杂了。"我该用什么？"...的答案就是：取决于具体的需求，用 jQuery 或 Vanilla JS 都可以。 Vanilla JS 可不是一个框架，也不是一个库，其实什么也不是，就是 JavaScript。...比如document.querySelector 和document.querySelectorAll，用类似 CSS 的语法提供了类 jQuery 的元素选择(比如 ".exterior-link")...从性能考虑，书写纯 JS 代码几乎肯定会更快(除非你的程序不优化)，即便是在更老更慢的设备上。和很多开发者一样，Smith 对这种新关注点很兴奋：“我从 Vanilla JS 获得了很多回报。

1.4K4 0

使用 Go + HTML + CSS + JS 构建漂亮的跨平台桌面应用

内置 Svelte、React 、Preact 、Vue、Lit 和 Vanilla JS 的模板 3. 从 Javascript 轻松调用 Go 方法 4....Windows 上不需要 CGO 或外部 DLL 6. 使用 Vite 的实时开发模式 7. 可以轻松创建、构建和打包应用的强大命令行工具 8. 丰富的运行时库 9....有以下框架的模板：Svelte、React、Vue、Preact、Lit 和 Vanilla。每个模板都有 Javascript 和 Typescript 版本。...Wails 使用专门构建的库来处理窗口、菜单、对话框等原生元素，因此您可以构建美观、功能丰富的桌面应用程序。它不嵌入浏览器，因此性能高。相反，它使用平台的原生渲染引擎。...当您的资源在磁盘上发生变化时，它会刷新。

6.7K1 0

号称世界上最流行的灯箱脚本！这款花盒为什么与众不同？

用 TypeScript 编写，没有外部依赖高度可定制，具有大量配置选项和 CSS 变量通过滑动、拖动和捏合缩放手势对触摸和移动设备进行了优化多个同时打开（活动）的实例两种类型的缩略图：经典和现代...安装和使用由于 Fancybox 是用 vanilla JS 编写的，因此很容易集成到任何地方。您不需要jQuery或任何其他依赖项！...(最新的代码也始终在 GitHub 上可用，而分发文件可以在 dist 文件夹中找到) <link rel="stylesheet...data-fancybox 值来创建一组<em>元素</em>。...您可以<em>在</em>每个<em>元素</em>中混合图像、视频和任何 HTML 内容。

611 0

JS 中循环遍历数组方式总结

作为属性键，数组元素的索引是字符串，而不是数字。它访问的是所有可枚举的属性键（自己的和继承的），而不仅仅是 Array 元素的那些。...如果用箭头函数（在ES6中引入）的话，在语法上会更加优雅。 .forEach() 的主要缺点是：不能在它的循环体中使用 await。不能提前退出 .forEach() 循环。...：用来遍历数组元素。...甚至可以将 break 和 continue 用于外部作用域。...如果你要做一些运算量很大的事，还是切换到 WebAssembly 更好一些。

3.4K4 0

用 ref 访问 Vue.js 程序中的 DOM

在本文中，你将了解如何在 Vue.js 中引用组件中的 HTML 元素。前提条件本文适用于所有使用 Vue 的开发人，包括初学者。...在阅读本文之前，你应该具备一些前提条件： Node.js 10.x或更高版本。...可以在 Vue.js 实例内部和外部访问 $refs。但是它们并不是数据属性，因此它们没有响应性。在浏览器中进行模板检查时，它们根本不显示，因为它不是 HTML 属性，只是一个 Vue 模板属性。...条件处理 Vue.js 的 refs 也可用于输出 DOM 元素内部的多个元素，例如使用 v-for 指令的条件语句。refs 在调用时返回一个 item 数组，而不是对象。...结论本文讲解了怎样在 Vue.js 中引用 DOM 中的 HTML 元素。你现在可以访问和记录所有的元素，例如值，子节点，数据属性，甚至它的 base URL。另外我们还学会了实现这一目标的方法。

2.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭