开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用vanillaJS - No JQuery在<body>标签上切换CSS类

使用vanillaJS（纯原生JavaScript）在<body>标签上切换CSS类可以通过以下步骤实现：

首先，需要在HTML文档中引入一个JavaScript文件。可以使用<script>标签将JavaScript代码嵌入HTML文件中，或者将代码保存在一个单独的.js文件中，并通过<script src="path/to/your/script.js"></script>将其引入HTML文件中。
在JavaScript代码中，使用document.querySelector()方法选择要切换CSS类的<body>标签。可以通过传递选择器作为参数来选择标签，例如document.querySelector('body')。
使用classList.toggle()方法在所选标签上切换CSS类。这个方法可以添加或移除指定的类名。例如，要切换一个名为"dark-mode"的CSS类，可以使用以下代码：
使用classList.toggle()方法在所选标签上切换CSS类。这个方法可以添加或移除指定的类名。例如，要切换一个名为"dark-mode"的CSS类，可以使用以下代码：
如果<body>标签原本没有这个类，它会被添加；如果已经有了这个类，它会被移除。

完整的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>VanillaJS Class Toggle</title>
  <style>
    .dark-mode {
      background-color: black;
      color: white;
    }
  </style>
  <script>
    function toggleDarkMode() {
      document.querySelector('body').classList.toggle('dark-mode');
    }
  </script>
</head>
<body>
  <h1>Example Page</h1>
  <button onclick="toggleDarkMode()">Toggle Dark Mode</button>
</body>
</html>

在上面的示例中，定义了一个名为"dark-mode"的CSS类，并创建了一个按钮。当按钮被点击时，调用toggleDarkMode()函数，从而切换<body>标签上的CSS类。这样可以实现在<body>标签上切换CSS类的效果。

推荐腾讯云相关产品：腾讯云云服务器（CVM）

产品介绍链接地址：https://cloud.tencent.com/product/cvm

相关搜索:切换伪类:使用css/jquery激活如何使用JQuery切换CSS？如何使用React onClick切换body上的类如何使用Jquery在日期-时间之后切换类？如何使用jQuery更改css类规则？使用javascript在div上切换多个css类如何使用jquery在两个元素之间切换类？如何使用'this‘jquery选择器切换辅助类如何使用jQuery在切换一个类的同时滚动到那个类？如何使用jQuery将body类添加到首页和内部页面？如何使用Vue动态列表在锚点标签上设置活动类如何根据方向的变化在css中左右切换类浮动？如何使用单击事件在Angular中切换类如何使用html类控件设置Jquery切换默认显示或隐藏？如何在Selenium + Python中使用CSS选择器选择某个标签上的所有类？如何使用javascript动态更改CSS类的属性(无JQuery)当使用jquery添加类时，如何为CSS添加动画或过渡CSS 在jQuery中使用此函数作为事件处理程序来切换类如何使用event.target在元素之间切换类？如何使用Jquery在新窗口中引用类

相关搜索:

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

有帮助

没帮助

相关·内容

EasyUI之Hello world（EasyUI的入门学习）

点击之后看到很多版本，根据自己的需求进行下载：选择版本之后就可以进行下载了（这里下载免费版本）： 2：在webContent下面创建js文件和easyUi文件。...5 6 7 easyUi01使用和说明.../js/jquery.easyui.min.js"> 16 17 18 19 <!...所有的easyui组件的样式均按如下格式设置：easyui-组件名 24 第四：如果要用easyui组件自身的属性时，必须在普通标签上书写data-options属性名， 25...:value,key:value,如果value时string类型加引号，外面双引号， 26 则里面单引号 27 注意：要在普通标签中书写data-options属性的前提是:在普通标签上加

1.6K10 0

jQuery基础

［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments...虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错约定：如果获取的是 jQuery...//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。...("color","red") 是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦 jquery支持两种循环方式：方式一格式：...用来在jQuery命名空间上增加新函数。

2.1K6 0

【Java 进阶篇】JQuery 事件绑定之事件切换：让页面动起来

-- Your content goes here --> 了解事件切换的基本语法在 JQuery 中，事件切换的基本语法是使用 toggle 方法。...使用 toggle 切换多个事件 toggle 方法不仅可以切换多个处理函数，还可以切换多个事件类型。这意味着你可以在同一个元素上，同时切换点击事件、悬停事件等多种事件。 <!...利用 data 存储状态在实际项目中，有时我们需要在不同的事件处理函数之间共享一些状态。这时，可以使用 data 方法来在元素上存储数据。 <!...另外，我们通过点击事件展示了如何获取当前状态。切换 CSS 类在页面交互中，改变样式是常见的需求之一。通过切换 CSS 类，我们可以实现更丰富的视觉效果。在这个例子中，我们在标签中定义了一个 CSS 类 .active，并使用 toggleClass 方法在按钮点击时切换这个类。

1662 0

jQuery - 获取并设置 CSS 类

jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。...我们将学习下面这些： addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作...("important"); }); 您也可以在 addClass() 方法中规定多个类：实例 $("button").click(function(){ $("body div:first")....).click(function(){ $("h1,h2,p").removeClass("blue"); }); jQuery toggleClass() 方法下面的例子将展示如何使用 jQuery...该方法对被选元素进行添加/删除类的切换操作：实例 $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

2.2K3 0

点击菜单选项，右侧主体区新增子界面（Tab）的实现

有一种效果是这样的，当点击左边菜单的时候，在右边的主体区会弹出相应的页面，点击多个菜单选项时，在右边依次陈列这些窗口，这些窗口之间可以相互切换，类似于浏览器的多个打开的窗口那样。...2.核心实现在上面三个方法的基础上，使用js向每个方法传递一些可变的参数，就可以实现执行方法，新建/删除/切换窗口的操作。.../3.2.1/jquery.min.js"> <link rel="stylesheet" href="layui-v2.3.0/layui/<em>css</em>/layui.<em>css</em>"

3.4K2 0

前端成神之路-01_jQuery

1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用。...方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。 ....切换类 $("div").toggleClass("current"); 注意：设置类样式方法比较适合样式多时操作，可以弥补css()的不足。...案例：tab 栏切换思路分析: 1.点击上部的li，当前li 添加current类，其余兄弟移除类。...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.5.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。

12K1 0

Vue模板语法

29 var vm = new Vue({ 30 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上...34 var vm = new Vue({ 35 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上...45 handle: function() { 46 // 控制isActive的值，在true和false之间进行切换...a、对象绑定和数组绑定可以结合使用。　　b、class绑定的值可以简化操作。　　c、默认的class如何处理。 1 <!...90 change: function(index) { 91 // 实现选项卡的切换操作，切换的本质就是修改的类名称

2.4K1 0

前端学习之jQuery

［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments...DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的方法,卵用会报错约定：如果获取的是jQuery对象,那么在变量前面加上$ var $... 切换事件委派： $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数...//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。...("color","red")　是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历 jQuery支持两种循环方式：方式一格式：$

3.2K1 0

JQuery的学习

步骤： 1.下载JQuery 目前jQuery有三个大版本： 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。...体积大一些 2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。...程序加载更快 2.导入JQuery的js文件：导入min.js文件 3.使用 <!...JQuery对象和JS对象区别与转换： 1.JQuery对象在操作时，更加方便； 2.JQuery对象和JS对象方法不通用； 3.两者相互转换： * JQuery --> JS : JQuery...使用 show/hide方法来完成广告的显示 */ //入口函数，在页面加载完成之后，定义定时器，调用这两个方法 $(function () {

16.6K2 0

jquery当中toggleClass的用法

例 1.4（toggleClass.html） toggleClass()方法 <!...-- .qieClass{ background-color:#00FF00; } --> $(function(){ //当点击标签时触发事件 $("p").click(function(){ //this表标jquery...对象$("p") //点击的时候不断切换,当有qieClass样式时就去掉样式，否则添加样式。 ...this.firstChild.nodeValue); $(this).toggleClass("qieClass"); }); }); <body

5590 0

Day01_webpack

可以去阿里巴巴矢量图标库, 选中想要的图标, 登录后, 生成css文件和字体文件下载css文件和字体文件, 也可以使用在线地址在自己页面中引入iconfont.css, 并在想显示字体图标的标签上使用类名即可...) 终端的熟练使用: 切换路径, 清屏, 包下载命令等切换路径 cd 清屏 cls 或者 clear 对base64字符串, 图片转base64字符串了解在线装换图片http://tool.chinaz.com...> 在src/main.js引入jquery yarn add jquery src/main.js中编写隔行变色代码 // 引入jquery import $ from 'jquery.../assets/logo_small.png) no-repeat center; } 在src/main.js - 把大图插入到创建的img标签上, 添加body上显示 // 引入图片-使用 import...类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。 webpack是基于入口的。

1.6K2 0

三、jQuery属性操作

在浏览器中找到span这个DOM元素之后，展开看到的都是属性。在attributes属性中保持的所有内容都是属性节点。....gif" alt=""> jQuery类操作相关方法添加类删除类切换类 1、添加与删除类 Javascript btns[0].onclick = function () { // 添加多个类用空格隔开...('class1 class2') } image.png 2、切换类 Javascript btns[2].onclick = function () { // 多个用空格隔开

3.8K2 0

脚本语言知识总结.

截取到3下标，1下标包含，3下标不包含 3.ECMAScript核心语法——函数 ①：函数定义的三种方式注意：第二种方式使用越来越多，第三种不常用，第一种常用 <script type...4.ECMAScript核心——JavaScript面向对象编程 Java是面向对象，写Java程序，写类和对象。JavaScript是基于对象，写Js，不用创建类，使用Js内部已经定义好的对象。...json格式数据------->>依赖第三方开源类库 ③：JSON-lib的使用是java类库，支持javabean map list array转换json格式字符串，支持将json字符串转换...④：XML格式数据处理练习3：select完成省级联动 1) XStream的使用问题：服务器端如何将java对象，生成XML格式数据？....css("color","blue"); }); // 建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张 $("img").toggle(function(){ $(this).attr

5K13 0

常用的CSS框架

常用的CSS框架之前在写自己的个人网站的时候，由于自己Web前端不是特别好，于是就去找相关的CSS框架来搭建页面了。...这里写图片描述 easyUI就是一个在Jquery的基础上封装了一些组件….我们在编写页面的时候，就可以直接使用这些组件…非常方便…easyUI多用于在后台的页面上… 在学习easyUI之前，我已经学过了...easyUI快速入门首先我们得去下载easyUI的资料… 然后在我们把对应的文件导入进去项目中，如下图： ? 这里写图片描述在html文件的body标签内，写上如下的代码： <!...:value,如果value是string类型加引号，外面双引号，则里面单引号注意：要在普通标签中书写data-options属性的前提是：在普通标签上加...: 150, title: 'My Panel', border: true, collapsible: true }); 在使用

3.3K8 0

「jQuery」基础 - 01

1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用。...方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。....切换类 $("div").toggleClass("current"); 注意：设置类样式方法比较适合样式多时操作，可以弥补css()的不足。...总结: 每次使用动画之前，先调用stop()，在调用动画。 1.5.6....事件切换 jQuery中为我们添加了一个新事件hover()，功能类似 css 中的伪类:hover，介绍如下：语法 hover([over,]out) // 其中over和out为两个函数

6.9K2 1

前端快速入门之概述

以下是对（前端）可视化工作的并不系统的总结，新手向，主要是想说一下前端如何组成、功能如何实现、资源如何请求，进而说到数据如何显示，并在最后列举了一些十分重要的参考资料（非常重要）。...JavaScript // 页面所有的（动态）事件，均由JavaScript绑定到html标签上，并由JavaScript完成整个交互动作的执行，包括鼠标事件、前后端的请求事件等等。...已知的发展（局部） HTML -> HTML5 CSS -> Sass, Less, Stylus JavaScript -> jQuery -> Vue/Node -> 已不单单是前端语言如何学习（...(jQuery) getjson(jQuery) websocket 结合IDE进行开发 WebStorm/IDEA 数据的展示图形绘制 Canvas //画布标签/容器，显示元素（点线面）的载体，本身有构造点线面的语法规则...//图表绘制 Tree.js(WebGL,3D) //3d绘制引擎 Mapbox.js(Map) //专注地图后端操作 Node.js fs //文件操作 child_process //线程管理 body-parser

1.5K2 0

BootStrap

动态效果是依赖于jQuery使用的，在使用Bootstrap动态效果前需要导入jQuery 下载与安装方式一：本地（没网可以备选） https://v3.bootcss.com/getting-started...媒体查询在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值简单理解为，响应式布局的实现，比如我们在pc端的界面是一个样，到了移动端也要正常显示的...在栅格系统中，是以row为类名起手写在类名为container的div标签中，将.row的div标签等分为12列 <!...组件，link标签href引入使用不要和其他组件混合使用图标类不能和其它组件直接联合使用。...它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的标签，并将图标类应用到这个标签上。 <!

3.3K1 0

JQuery 入门 - 附案例代码

到底是什么 jQuery的官网 http://jquery.com/ jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。...大版本分类： 1.x版本：能够兼容IE678浏览器 2.x版本：不能兼容IE678浏览器 3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678...').css({ 'color':'green', 'font-size':'20px' }); 类名设置 /*1.添加一个类*/ $('li')....addClass('now'); /*2.删除一个类*/ $('li').removeClass('now'); /*3.切换一个类有就删除没有就添加*/ $('li...(function(index,element){}); 【案例：不同的透明度.html】多库共存 jQuery使用作为标

13.9K1 0

前端之jQuery

原生的js对象如何转换成jQuery对象？...样式类 addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。...hasClass();// 判断样式存不存在返回的是布尔值 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。...为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。...注意：在遍历过程中可以使用 return false提前结束each循环。

4.9K2 1

前端基础：jQuery

也都能做，但使用 jQuery 能大幅提高开发效率 jQuery Advantages 体积小，压缩后只有 100 KB 左右强大的选择器出色的 DOM 封装可靠的事件处理机制出色的浏览器兼容性...DOM 元素方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法 “$” 等同于 “jQuery” 例如： hello ..."color","red"); // 下标小于 2 的 li $("li:lt(2)").css("color","red"); // 使用转义符 $("#h2\\#x"...).css("color","red"); 事件鼠标事件鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。...> 类样式函数 addClass() 为元素添加类样式 removeClass() 将元素的类样式移除 toggleClass() 样式的切换；有->无，无->有 div{

13.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭