通过getElementsByClassName获取的节点，style.display失效

最新推荐文章于 2023-11-07 15:24:43 发布
最新推荐文章于 2023-11-07 15:24:43 发布
阅读量5k 收藏 3
点赞数 5
分类专栏： JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37332077/article/details/110481582
版权

遇到问题：
在这里插入图片描述

点击删除按钮，想删除一块内容。这么写：
在这里插入图片描述
会发现代码报错！
在这里插入图片描述
解决方案一：
getElementsByClassName与ID获取的不一样，打印getElementsByClassName得到的是一个HTMLCollection，要用getElementsByClassName(“content”)[0]的形式。
在这里插入图片描述
解决方案二：
用ID完全没问题拉
在这里插入图片描述

小丸子的口袋
关注
专栏目录
关于使用getElement获取元素后无法取到具体style的解决方式
qq_35590165的博客
05-15 2128
在我们使用getElementById 或者getElementByClassName获取元素的样式的时候。发现只要不是在元素的内联样式，获取到的style都为空。 这时候我们就需要用到一个js的原生函数getComputedStyle() document.defaultView.getComputedStyle(element[,pseudo-element]); 或者 window.getComputedStyle(element[,pseudo-element]); 这个函数...
关于getElementsByClassName
zlp_hyd的专栏
12-26 762
开始重新学习css和js，一直使用的是jQuery，好多js的东西没有注意到。比如今天遇到的getElementsByClassName。 使用getElementsByClassName获取div，控制它的样式，一直提示对象的“style”属性不存在，想了好久，终于看到它获取到的是集合，不是单个dom元素，使用下角标[0]获取到了该元素。 查看了一下，该方法支持ie9以上，其他的ie版本并不
js中style.display=””无效的解决方法
01-19
本文实例讲述了js中style.display=””无效的解决方法。分享给大家供大家参考。具体解决方法如下： 一、问题描述： 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作，但如果我们style.display=””可能导致没有效果。 看下面一段代码： 代码如下:<style>  #name  {      display:none;  } </style> </head> <body> <div id=”name”> My name is smile. </div> </body> </html> [removed] [removed]=function(){ doc
js document.getElementsByClassName(“xxx“).style.display
竹毛言己
10-14 4136
## 问题 有一个div标签，通过class拿到该标签后，想隐藏块的内容。 ```js document.getElementsByClassName("xxx").style.display = "none"; ``` 这样写结果发现不生效。 ## 分析 在浏览器里调试了一下，找到这个div，添加display: none可以隐藏该块的内容。这说明不是display: none的问题。 在console里面打印 `document.getElementsByClassName("xxx").st
document.getElementById(I).style.display=““不起作用
w710537643的博客
01-05 5084
console.log("INTP") var tag = document.getElementById("INTP"); console.log(tag) tag.style.display = ""; console.log(tag.style.display) console.log("INTP") var tag = document.getElementById("INTP"); console.log(tag) tag.style.d
innerHTML无法直接对document.getElementsByClassName等进行操作，与Elements返回数据类型有关
lengzhuji的博客
03-30 236
当把let ul = document.getElementsByClassName('common')改为let ul = document.getElementsByClassName('common')[0]的时候就可以正常的进行操作，也不会不出结果。在Elements带复数形式中返回的数据类型为数组，且数组中的数据为对象的形式。主要的原因就是没有具体定位到需要的节点上，数组无法被直接操作。这里innerHTML无法为ul添加我写的字符串unm，
（Django）Web网页制作HTML文件时遇到的问题集合
weixin_47401619的博客
06-20 1156
前端知识点
在线考试系统html页面结果,Node.js在线考试系统——页面布局(学生)
weixin_35137190的博客
05-30 1581
Node.js在线考试系统1.布局总览准备界面.jpg答题界面.jpg2.页面布局模块分析1.navBar页面中的导航栏2.ready考试前的准备界面,由三个部分组成考试开始时间考试倒计时开始测试按钮2.1 deltaTime考试倒计时2.2 startTest开始测试按钮,时间到则允许开始考试3.main考试的主要界面,由四个部分组成题目相关信息题目内容输入框三个按钮3.1questionInf...
vue2笔记
最新发布
szzlh123456789的博客
11-07 157
vue笔记
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
移动应用开发面试题(2022)
qq_53228343的博客
04-16 3575
一、HTML+CSS基础 1. display:none; 和visibility:hidden;的区别 display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。 visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。 2. CSS 选择器权重如何计算 就近原则：直接选中的，一定比继承的权重大。 一样近，比权重： id是100，class是10，标签是1， 总数权重一样谁写在下面听谁的。 行内
document.getElementByclassName（）方法
热门推荐
boat_sea的博客
04-29 24万+
document.getElementByclassName（）方法;使用指定的calss属性值返回相关元素的集合(节点列表)使用getElementByclassName（）方法，使用指定的calss属性值(名称)返回当前文档中所有相关元素的集合(节点列表对象)。节点列表对象代表了收集到的所有相关节点，可以使用序列号(index)访问节点列表，index的值从0开始。注：使用节点列表对象的len...
HTML5实战与剖析之CSS选择器——getElementsByClassName()方法
梦龙小站
01-21 6375
HTML5中的querySelector()方法和querySelectorAll()方法都在前几篇中为大家介绍过了，不知道大家了解得怎么样了呢?在这里复习一下，querySelector()方法是返回与传递的CSS选择符相匹配的第一个元素;querySelectorAll()方法是返回与传递的CSS选择符相匹配的所有元素，是一个NodeList对象。
（学习）document.getElementsByClassName()
weixin_48372590的博客
04-14 2万+
个人学习记录，根据别的博主的demo学习，并加上自己的学习标记，文章有标记来源
getElementsByClassName兼容写法
林飞的梦呓
01-16 408
一、HTML+CSS部分// 这里是CSS部分 * { margin: 0; padding: 0; } .clearfix { zoom: 1; } .clearfix:after { display: block; content: ''; clear: bot
js类名获取元素，样式无法设置的问题
Gqw1997的博客
08-07 255
使用选择器获取p1可以成功设置样式，但是使用类名获取元素设置样式会出现报错。
用getElementsByClassName获取元素后，绑定的事件为什么不起作用。
dong_dong222的博客
11-30 1619
用getElementsByClassName获取元素后，绑定的事件为什么不起作用。
getElementsByClassName获取网页class属性时JS动作没有响应问题解决
XYCMS博客家园
01-12 690
javascript原生程序，在进行属性功能调试时会发现没有效果，如 <div class="btn">点我啊</div> <script> document.getElementsByClassName("btn").onclick=function(){ alert("测试弹出！"); } </script> 发现点击并没有弹出框，为什么呢？那是因为一个属性类class和ID的区别；ID的话正常就可以，用getElementsByID，但是有时候项
JS：getElementsByClassName()无效的原因以及解决方法
tiandaochouqin_1的博客
04-09 1万+
<button class="btn btn-xs btn-warning revise">编辑</button> var revise = document.getElementsByClassName("btn btn-xs btn-warning revise")[0]; revise.onclick=function revise() { revBack...
document.getElementsByClassName 未获取到节点
08-26
document.getElementsByClassName是一个用于通过指定类名获取DOM节点的方法。但是，在某些情况下，可能无法获取到节点。 一个可能的原因是，当使用document.getElementsByClassName方法时，DOM元素可能还没有被完全加载。因此，在确保DOM元素已经加载完成后，再使用document.getElementsByClassName方法可能会解决这个问题。 另一个可能的原因是，当指定的类名不存在于文档中时，document.getElementsByClassName将会返回一个空的NodeList集合，而不是undefined。所以，如果返回undefined，可能是因为没有匹配到指定的类名。 因此，为了确保能正确获取到节点，建议在使用document.getElementsByClassName之前，先确保DOM元素已经加载完成，并检查指定的类名是否存在于文档中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [javascript getElementsByClassName 和js取地址栏参数](https://download.csdn.net/download/weixin_38623707/13218699)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【js】控制台使用document.getElementsByClassName能正确获取到节点，但是在写在js文件中的脚本却获取不到...](https://blog.csdn.net/qq_36557846/article/details/125868402)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [document.getElementsByClassName(“iframe-top“) 获取为undefined或为空数组 ，拿不到想要的元素](https://blog.csdn.net/m0_63108819/article/details/124164492)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值