Question

我得到了offsetHeight结合比例变换的奇怪结果。我的简单HTML如下

  <body>
    <div id="id01">
      Some Text
    </div>
    <div id="id02" style="transform-origin: left top; transform: scale(2)">
      Some Text
    </div>
  </body>

  <script>
    var elem01 = document.getElementById('id01');
    var elem02 = document.getElementById('id02');
    alert(elem01.offsetHeight == elem02.offsetHeight);   // Always show true???
  </script>

在屏幕上，第二个<div>比第一个<div>更大（两倍）。因此我预计第二个<div>的offsetHeight应该大于第一个。

我的问题是：在这种情况下，为什么elem01.offsetHeight始终等于elem02.offsetHeight？浏览器不使用transform来计算元素的offsetHeight？

由于

Answer 1

变换影响像素比率，而不影响DOM中的实际像素数量。

This previous question has some insights and possible solutions.

CSS转换比例和Javascript offsetHeight

1 个答案: