document.getElementsByClassName(‘...‘)获取不到元素

静谧幽怡

已于 2023-10-18 20:12:32 修改

阅读量1.4k

点赞数

文章标签： javascript 前端 vue.js

于 2023-10-18 20:07:16 首次发布

本文链接：https://blog.csdn.net/m0_52542347/article/details/133913559

版权

文章讨论了在Vue应用中，使用`getElementById`和`getElementsByClassName`获取DOM元素时，即使代码正确执行但输出可能为空的问题，原因可能是Vue的生命周期阶段问题或数据未及时更新，链接提供了相关解决方案的参考.

摘要由CSDN通过智能技术生成

代码：

let elementById = document.getElementById('aaa');
console.log(elementById.offsetLeft)
let elements1 = document.getElementsByClassName('gantt_menu');
console.log(elements1)

控制台：

更改代码：

let elementById = document.getElementById('aaa');
console.log(elementById.offsetLeft)
let elements1 = document.getElementsByClassName('gantt_menu');
console.log(elements1[0])

控制台：

css：

 <div class="gantt_group" v-for="item of taskInfo">
   <div class="gantt_menu">{{ item.name }}</div>
      <div class="gantt_body"
                   :style="{'left': mathPosition(itemBody.startDate),'width':mathGanttLength(itemBody.startDate,itemBody.endDate)}" v-for="itemBody of item.stage">
       {{ itemBody.text }}
    </div>
 </div>

看了很多资料是由于vue没有加载出来，导致为空,但我的已经打印出来了只要使用遍历或索引就是空，这是博客上的解答https://blog.csdn.net/weixin_41602509/article/details/86661758https://blog.csdn.net/weixin_41602509/article/details/86661758