首页 > 其他分享 >修改元素样式报错:Cannot set properties of undefined (setting 'visibility')

修改元素样式报错:Cannot set properties of undefined (setting 'visibility')

时间:2024-04-24 15:36:35浏览次数:26  
标签:set undefined cl getElementsByClassName visibility 报错 let document

1、正常书写代码如下:

 <div class="cl">
      <div id="mask">
        <span id="close">X</span>
      </div>
  </div>

 <!-- JS代码如下 -->
    <script>
      let close = document.getElementById("close");
      let cl = document.getElementsByClassName("cl");
      close.onclick = function () {
        cl.style.visibility = "hidden";
      };
    </script>

2、出现报错信息:Uncaught TypeError: Cannot set properties of undefined (setting 'visibility')

 3、解决办法

   通过添加[0]来获取准确元素节点
  (1) let cl = document.getElementsByClassName("cl")[0];

   直接通过ID获取DOM元素节点
  (2) let cl = document.getElementById("cl");    

4、总结原因

使用getElementsByClassName得到的是一个HTMLCollection,要用getElementsByClassName(“content”)[0]的形式。

标签:set,undefined,cl,getElementsByClassName,visibility,报错,let,document
From: https://www.cnblogs.com/wanker/p/18155549

相关文章

  • 解决 java 实体中用 LocalDateTime 在转换时候报错 Error attempting to get column
    java中的实体类用到了LocalDateTime类型。在转换时候报错Errorattemptingtogetcolumn‘XXX’fromresultset.Cause:java.sql.解决方法最为简单。是因为com.alibaba的版本问题。切换版本号到1.1.22即可消除问题<dependency><groupId>com.alibaba</gro......
  • Vue项目报错,点击浏览器报错信息定位不到报错代码,该如何优雅地调试代码?
    一、背景通过vue-cli服务运行项目,项目运行一切正常。但打包后,通过nginx部署运行,大屏展示模块报echartstypeError错误。但是点击浏览器报错信息,定位到的位置代码根本看不懂。经过一番寻找,发现打包时,webpack配置产生源码的属性为false。这样就会导致,打包后代码经过压缩加密,出现报......
  • composer update 依赖文件没有任何问题,依然报错it could not be found in any version
    一、报错案例composerupdate或者composerinstallcomposer.json依赖文件没有任何问题,依然报错itcouldnotbefoundinanyversion 二、解决主要就是切换镜像源:composerconfig-grepo.packagistcomposerhttps://packagist.org之后再执行composerinstall即可!......
  • An Analysis of Sequential Recommendation Datasets
    目录概统计角度论证实验论证代码WoolridgeD.,WilnerS.andGlickM.Ananalysisofsequentialrecommendationdatasets.PERSPECTIVES,2021.概本文讨论了MovieLens系列数据集是否适用于序列推荐.统计角度论证作者为了论证MovieLens不适合作为序列推荐数据集,......
  • Nuxtjs如果使用useHead()导入swiper,除了在onMounted调用,切换报错前面使用 await next
     注意:awaitnextTick();如果没用,vue切换的时候可能有问题<scriptlang="ts"setup>import{DArrowRight}from"@element-plus/icons-vue";useHead({script:[{src:"/script/swiper.js",},],link:[{......
  • 客户端使用 FeignClient 调用服务端服务时,报错:Request method ‘POST‘ not supporte
    客户端使用FeignClient调用服务端服务时,报错:Requestmethod‘POST‘notsupported修改错误前调用方式:FeignClient 接口服务@FeignClient(contextId="remotePayFormService",value="payment-service-system")publicinterfaceRemotePayFormService{@GetMap......
  • Computer Basics 10 - Setting Up a Computer
     Settingupacomputer НастройкакомпьютераSoyouhavea newcomputer andyou'rereadytosetitup.Thismayseemlikeanoverwhelming/ˌəʊvəˈwelmɪŋ/andcomplicated /ˈkɒmplɪkeɪtɪd/task,butit'sactuallyaloteasier......
  • oracle连接数据库报错ORA-12541:TNS:无监听程序
    最近闲来无事修改了电脑的用户名,本来以为不会影响什么,后来发现oracle数据库连接不上了,报错如下图:查看服务发现确实停止了,启动也启动不起来了搜索NetManager查看配置, 发现配置里面是我修改前的电脑名,才发现问题所在,随后我又把电脑名称改回来了数据库才能正常连接修改用户......
  • P3667 [USACO17OPEN] Bovine Genomics G (set容器)
    [USACO17OPEN]BovineGenomicsG题目描述FarmerJohnowns\(N\)cowswithspotsand\(N\)cowswithoutspots.Havingjustcompletedacourseinbovinegenetics,heisconvincedthatthespotsonhiscowsarecausedbymutationsinthebovinegenome.Atgr......
  • 关于set容器
    简介集合(set)用以有序地存储互异元素的容器。其实现是由节点组成的红黑树,每个节点都包含着一个元素,节点之间以某种比较元素大小的谓词进行排列。头文件#include<set>常用操作声明set<数据类型>变量名操作插入与删除insert(x)当容器中没有等价元素的时候,将元素......