JS 获得DIV 的动态大小的方法以及注意事项

最新推荐文章于 2024-04-12 16:46:15 发布

MaraSun

最新推荐文章于 2024-04-12 16:46:15 发布

阅读量399

点赞数

分类专栏：软件开发文章标签： javascript 前端开发语言动态获取DOM高度宽度

本文链接：https://blog.csdn.net/Uman/article/details/127376772

版权

软件开发专栏收录该内容

125 篇文章 2 订阅

订阅专栏

本文探讨了如何在网页开发中正确获取隐藏元素的大小，通过`getBoundingClientRect()`和`window.getComputedStyle()`方法，强调了确保元素可见的重要性。详细解释了两种常见方法并提供了MDN文档链接。

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

这个网上方法很多，笔者也是参考了很多。为啥呢，因为获得高度要么是100% 要么是0。后来才发现原因是：需要获得高度的DIV没有显示出来。
方法大致有两种：

    var container= document.getElementById("container");
   var myRect = container.getBoundingClientRect();
   var myStyle = window.getComputedStyle(container, null);

其中：myRect 的属性值如下所示：

bottom
: 
837.9118957519531
height
: 
633.8778076171875
left
: 
86.8039779663086
right
: 
972.5993881225586
top
: 
204.03408813476562
width
: 
885.79541015625
x
: 
86.8039779663086
y
: 
204.03408813476562