使用querySelector添加移除style和class

最新推荐文章于 2025-02-27 14:42:12 发布
最新推荐文章于 2025-02-27 14:42:12 发布
阅读量3.4k 收藏 1
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zihang_cheng/article/details/129000714
版权
本文介绍了如何使用JavaScript的querySelector方法结合style对象和classList接口来动态地添加和移除DOM节点的样式及类。例如，通过设置style.display可改变元素的显示方式，而classList.add和classList.remove则用于管理元素的类列表。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document.querySelector(selector).style.styleName = 样式

使用这个方法可以对dom节点添加和移除style样式，其中的styleName可以为css样式的任何值，如：display、color

document.querySelector(".treasure_box").style.display = "block";

document.querySelector(selector).classList.add(className)

对dom节点添加一个class

document.querySelector("html").classList.add("noscroll");

document.querySelector(selector).classList.remove(className)

对dom节点移除一个class

document.querySelector("html").classList.remove("noscroll");

Dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆
weixin_48796690的博客
10-23 532
Web API之dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆
Day01 获取DOM元素，操作元素内容，事件监听，操作DOM属性，操作元素样式style(className，classList)，自定义属性
2402_88640716的博客
11-22 976
我是一个div
Query 添加和删除class
03-17 333
如果匹配对象具有指定的样式类，那么toggleClass()就可以删除此指定的类，如果没有就会添加指定的类。以上代码可以添加删除指定的样式，上面只是一个演示，可以根据具体的需要进行添加或者删除。通过动态的给元素添加删除CSS类可以实现此功能，下面通过实例来介绍一下。实际应用中，需要根据不同条件来改变元素的CSS样式。以上代码可以进行指定样式类的删除与添加的切换。
获取DOM元素： 获取DOM元素：‘documentdocument.querySelector——你的网页“抓取神器”
最新发布
fyx77477的博客
02-27 890
记住，选择器是你的“寻宝地图”，写得越精准，开发效率就越高！就是你的“抓取神器”，它能帮你轻松找到页面中的元素，并进行各种操作
Web前端之JavaScript删除元素、移除、querySelector、removeChild、remove
CSDN博客主页地址：https://mengjian.blog.csdn.net/
06-28 3505
Web前端之JavaScript删除元素、移除、querySelector、removeChild、remove
一小波DOM骚操作：querySelectorAll和classList
weixin_34346099的博客
12-01 1719
虽然现在MVVM框架带来了诸多便利，但你真的就不再需要操作DOM了吗？本文通过几个小例子来介绍一些DOM操作的小技巧 场景一：querySelectorAll 陆小鸡最近遇到了这样一个问题，他引用了一个第三方的表格组件，他引入组件的代码如下： <jj-table id="mytable"></jj-table> 组...
实现jquery 的 removeClass 方法
翩若惊鸿 宛若游龙
06-06 1433
第一种 纯数组操作<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>removeclass</title> </head> <body> <div class="demo test hi"></div> <button onclick="removeClass()">Go</bu
jQuery（入门&选择器）
weixin_67465673的博客
03-17 1470
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* window.onload=function(){ //拿到按钮 var...
sub = document.querySelector("#app3") 判断sub,如果存在后代则移除
10-31
如果你想检查`sub`元素是否存在，并且它有后代元素，然后移除`sub`及其所有后代，你可以使用...如果你只想隐藏或者暂时移除，而不希望完全删除，可以考虑改变`style.display`或者使用`classList.add('hidden')`等方法。
querySelector、querySelectorAll、attribute的运用以及 click的使用
SLL_boy的博客
09-12 1423
<!DOCTYPE html> <html lang="en"> <!--不说了，继续表白林祤环--> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
webpack(7)_CSS_使用style-loader和css-loader
renzhongrui的博客
07-30 8161
style-loader 安装style-loader npm install style-loader --save-dev 安装css-loader npm install css-loader --save-dev
鼠标经过li时添加样式，鼠标离开li时移除样式
05-31
这可以通过CSS中的:hover伪类和JavaScript中的事件监听来实现。 首先，在CSS中添加:hover伪类来设置...这里通过classList属性的add和remove方法来添加和移除样式类，也可以通过直接修改element.style属性来改变样式。
推荐两种原生JavaScript移除className的实用方式
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-04 850
方式1： document.querySelector(`.className`).classList.remove(`className`);//移除class类样式 方式2： document.querySelector(`.className`).className.replace(`className`，``);
querySelectorAll()与querySelector()
qq_58159494的博客
09-01 1556
我们可以看到let b它只获取了class为One的第一个元素 ,并没有获取到它的另一个class为One的元素，这也就是querySelector()它的返回值只是返回符合该选择器的第一个元素,并且我们获取的<a>标签它显示的是为null。querySelectorAll()与querySelector()都是用来获取DOM元素的，不同的是querySelectorAll()的返回值会返回符合该选择器的所有元素。(二) querySelectorAll()（一）querySelector()
python listnode类_一小波DOM骚操作：querySelectorAll和classList
weixin_39667398的博客
12-21 545
虽然现在MVVM框架带来了诸多便利，但你真的就不再需要操作DOM了吗？本文通过几个小例子来介绍一些DOM操作的小技巧场景一：querySelectorAll陆小鸡最近遇到了这样一个问题，他引用了一个第三方的表格组件，他引入组件的代码如下：组件渲染后的结构大致如下：为了获取tbody这个dom节点，他写下了如下代码：var el = document.getElementsByClassName('...
小程序节点查询的API - wx.createSelectorQuery()。
学习记录
11-27 1万+
官网地址 age({ queryMultipleNodes: function(){//声明节点查询的方法 var query = wx.createSelectorQuery()//创建节点查询器 query query.select('#the-id').boundingClientRect()//这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求...
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
热门推荐
CYK_byte的博客
11-04 2万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
document.querySelector
qq_44709805的博客
11-08 3604
document.querySelector 这个document对象的querySelector是HTML5API新定义的方法 如果是id选择器传放一个参数“#id” id选择器返回这个节点元素对象 如果是class的选择器则传入一个".class" class选择器返回document节点或id节点元素对象中的第一个元素 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> &.
HTML5中类jQuery选择器querySelector的使用
weixin_33975951的博客
06-22 317
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。 element = documen...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值