getBoundingClientRect();不工作..？
Posted
技术标签:
【中文标题】getBoundingClientRect();不工作..？【英文标题】：getBoundingClientRect(); Does not working ..? 【发布时间】：2020-09-18 18:55:16 【问题描述】：我想知道 .mydiv 离身体顶部有多远，为此我使用了代码 getBoundingClientRect() 但它不起作用，这是我的代码：
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Elemet.GetBoundingClientRect();</h1>
<div class="myDiv">blah balh balh</div>
<script type="text/javascript">
var div = document.querySelector(".myDiv");
var rect = div.getBoundingClientRect();
console.log(rect);
</script>
</body>
</html>`
这是结果：
`DOMRect x: 0, y: 0, width: 0, height: 0, top: 0, ... 底部：0 高度：0 左：0 右：0 顶部：0 宽度：0 x: 0 是：0 __proto__: DOMRect`结果只给了我零个数字我该如何解决这个问题请帮忙 ???!
【问题讨论】：
在哪个浏览器和版本中会发生这种情况？ 在 chrome 浏览器版本 85.0.4183.102 中 你说得对，我在 microsoft Edge and internet explorer 浏览器中尝试过，效果很好。非常感谢你 【参考方案1】：它正在工作。尝试删除 css 并再次测试。
<h1>Elemet.GetBoundingClientRect();</h1>
<div class="myDiv">blah balh balh</div>
<script type="text/javascript">
var div = document.querySelector(".myDiv");
var rect = div.getBoundingClientRect();
console.log(rect);
</script>【讨论】：
我会试一试，但它不起作用，但在 chrome 浏览器中出现问题，我在 Internet Explorer 浏览器中再次测试它，它工作得很好。 / 非常感谢你帮助我以上是关于getBoundingClientRect();不工作..？的主要内容，如果未能解决你的问题，请参考以下文章
getBoundingClientRect，内联 SVG 的高度值不正确
Safari 的 getBoundingClientRect() 实现返回不正确的顶部
Windows / IE11 中的范围元素上的 getBoundingClientRect 不正确