使用querySelector添加移除style和class

最新推荐文章于 2024-08-28 14:41:59 发布
原创 最新推荐文章于 2024-08-28 14:41:59 发布 · 3.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #前端

本文介绍了如何使用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 550
Web API之dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆
Day01 获取DOM元素，操作元素内容，事件监听，操作DOM属性，操作元素样式style(className，classList)，自定义属性
2402_88640716的博客
11-22 985
我是一个div
Query 添加和删除class
03-17 341
如果匹配对象具有指定的样式类，那么toggleClass()就可以删除此指定的类，如果没有就会添加指定的类。以上代码可以添加删除指定的样式，上面只是一个演示，可以根据具体的需要进行添加或者删除。通过动态的给元素添加删除CSS类可以实现此功能，下面通过实例来介绍一下。实际应用中，需要根据不同条件来改变元素的CSS样式。以上代码可以进行指定样式类的删除与添加的切换。
Web前端之JavaScript删除元素、移除、querySelector、removeChild、remove
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
06-28 3632
Web前端之JavaScript删除元素、移除、querySelector、removeChild、remove
一小波DOM骚操作：querySelectorAll和classList
weixin_34346099的博客
12-01 1730
虽然现在MVVM框架带来了诸多便利，但你真的就不再需要操作DOM了吗？本文通过几个小例子来介绍一些DOM操作的小技巧 场景一：querySelectorAll 陆小鸡最近遇到了这样一个问题，他引用了一个第三方的表格组件，他引入组件的代码如下： <jj-table id="mytable"></jj-table> 组...
实现jquery 的 removeClass 方法
翩若惊鸿 宛若游龙
06-06 1449
第一种 纯数组操作<!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
elementui给class元素添加style js
07-16
然后通过`style`属性直接修改样式，或者通过`classList`来添加/移除类名。 但是，在Vue项目中，直接操作DOM并不是最佳实践，尤其是在组件可能被重新渲染的情况下（因为重新渲染后DOM可能会变化，我们之前操作的...
custom-class 已被 弃用, 之后将会在 2.4.0移除, 请使用 class.
03-01
嗯，用户提到在Vue3和Element Plus中，custom-class属性已经被弃用，并且在未来的2.4.0版本会被移除，建议改用class。我需要先确认这个信息是否正确，然后找出替代方案。首先，应该查阅Element Plus的官方文档或更新...
querySelector无法查找js添加的div
最新发布
07-18
我们正在讨论querySelector无法查找js添加的div的问题。核心原因是查询时机过早，在元素被添加到DOM之前就执行了查询。解决方法包括使用MutationObserver、延迟查询（如事件回调、微任务）等。 在回答中，我将提供...
sub = document.querySelector("#app3") 判断sub,如果存在后代则移除
10-31
如果你想检查`sub`元素是否存在，并且它有后代元素，然后移除`sub`及其所有后代，你可以使用...如果你只想隐藏或者暂时移除，而不希望完全删除，可以考虑改变`style.display`或者使用`classList.add('hidden')`等方法。
jQuery（入门&选择器）
weixin_67465673的博客
03-17 1500
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* window.onload=function(){ //拿到按钮 var...
推荐两种原生JavaScript移除className的实用方式
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-04 878
方式1： document.querySelector(`.className`).classList.remove(`className`);//移除class类样式 方式2： document.querySelector(`.className`).className.replace(`className`，``);
querySelectorAll()与querySelector()
qq_58159494的博客
09-01 1585
我们可以看到let b它只获取了class为One的第一个元素 ,并没有获取到它的另一个class为One的元素，这也就是querySelector()它的返回值只是返回符合该选择器的第一个元素,并且我们获取的<a>标签它显示的是为null。querySelectorAll()与querySelector()都是用来获取DOM元素的，不同的是querySelectorAll()的返回值会返回符合该选择器的所有元素。(二) querySelectorAll()（一）querySelector()
python listnode类_一小波DOM骚操作：querySelectorAll和classList
weixin_39667398的博客
12-21 550
虽然现在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 3617
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 325
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。 element = documen...
JS中【querySelector】详解
2301_79858914的博客
08-28 6424
是 JavaScript 中用于查找 DOM 元素的一个非常强大的方法。它允许你根据 CSS 选择器从文档中查找并返回第一个匹配的元素。这个方法在现代浏览器中广泛支持，并且可以通过选择器灵活地访问 DOM 树中的元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值