使用querySelector添加移除style和class

最新推荐文章于 2024-11-22 16:08:07 发布

原创最新推荐文章于 2024-11-22 16:08:07 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

本文介绍了如何使用JavaScript的querySelector方法结合style对象和classList接口来动态地添加和移除DOM节点的样式及类。例如，通过设置style.display可改变元素的显示方式，而classList.add和classList.remove则用于管理元素的类列表。

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");

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Michael_Cheng_09

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JavaScriptDOM

bbdRzzz的博客

11-16

1974

JavaScriptDOM

Query 添加和删除class

03-17

361

如果匹配对象具有指定的样式类，那么toggleClass()就可以删除此指定的类，如果没有就会添加指定的类。以上代码可以添加删除指定的样式，上面只是一个演示，可以根据具体的需要进行添加或者删除。通过动态的给元素添加删除CSS类可以实现此功能，下面通过实例来介绍一下。实际应用中，需要根据不同条件来改变元素的CSS样式。以上代码可以进行指定样式类的删除与添加的切换。

参与评论您还未登录，请先登录后发表或查看评论

Web前端之JavaScript删除元素、移除、querySelector、removeChild、remove

优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/

06-28

3838

Web前端之JavaScript删除元素、移除、querySelector、removeChild、remove

一小波DOM骚操作：querySelectorAll和classList

weixin_34346099的博客

12-01

1744

虽然现在MVVM框架带来了诸多便利，但你真的就不再需要操作DOM了吗？本文通过几个小例子来介绍一些DOM操作的小技巧场景一：querySelectorAll 陆小鸡最近遇到了这样一个问题，他引用了一个第三方的表格组件，他引入组件的代码如下： <jj-table id="mytable"></jj-table> 组...

实现jquery 的 removeClass 方法

翩若惊鸿宛若游龙

06-06

1472

第一种纯数组操作<!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

1532

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* window.onload=function(){ //拿到按钮 var...

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的官方文档或更新...

dom添加移除类名

07-16

通过添加和移除类名，可以有效地控制 DOM 元素的显示与隐藏状态。这种技术通常结合 CSS 的 `display` 或 `visibility` 属性来实现，使代码更具有可维护性和灵活性。 #### 示例：使用 JavaScript 切换类名控制元素...

querySelector无法查找js添加的div

最新发布

07-18

我们正在讨论querySelector无法查找js添加的div的问题。核心原因是查询时机过早，在元素被添加到DOM之前就执行了查询。解决方法包括使用MutationObserver、延迟查询（如事件回调、微任务）等。在回答中，我将提供...

Day01 获取DOM元素，操作元素内容，事件监听，操作DOM属性，操作元素样式style(className，classList)，自定义属性

2402_88640716的博客

11-22

1060

我是一个div

推荐两种原生JavaScript移除className的实用方式

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

01-04

974

方式1： document.querySelector(`.className`).classList.remove(`className`);//移除class类样式方式2： document.querySelector(`.className`).className.replace(`className`，``);

querySelectorAll()与querySelector()

qq_58159494的博客

09-01

1697

我们可以看到let b它只获取了class为One的第一个元素 ,并没有获取到它的另一个class为One的元素，这也就是querySelector()它的返回值只是返回符合该选择器的第一个元素,并且我们获取的<a>标签它显示的是为null。querySelectorAll()与querySelector()都是用来获取DOM元素的，不同的是querySelectorAll()的返回值会返回符合该选择器的所有元素。(二) querySelectorAll()（一）querySelector()

python listnode类_一小波DOM骚操作：querySelectorAll和classList

weixin_39667398的博客

12-21

568

虽然现在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的节点，获取节点位置信息的查询请求...

Dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆

weixin_48796690的博客

10-23

577

Web API之dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆

【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~