时间戳

首页 > 解决方案 > getBoundingClientRect(); 不工作..？

javascript - getBoundingClientRect(); 不工作..？

问题描述

我想知道 .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`

结果只给了我零个数字
我该如何解决这个问题请帮忙？？？！

标签： javascripthtmlcssknapsack-problem

解决方案

这是工作。尝试删除 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>

推荐阅读