CSS转换比例和JavaScript offsetHeight

Question

I got a strange result of offsetHeight combining with scale transforming. 我得到了offsetHeight与比例转换相结合的奇怪结果。 My simple HTML as below 我的简单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>

On the screen the second <div> is bigger (twice) than the first <div> . 在屏幕上，第二个<div>比第一个<div>大（两倍）。 Thus I expected second <div> 's offsetHeight should be greater than the first one. 因此，我期望第二个<div>的offsetHeight应该大于第一个。

My question is: Why elem01.offsetHeight always equals to elem02.offsetHeight in this case? 我的问题是：在这种情况下，为什么elem01.offsetHeight始终等于elem02.offsetHeight ？ The browser does not use transform to calculate element's offsetHeight ? 浏览器不使用transform计算元素的offsetHeight ？

Thanks 谢谢

Answer 1

The transform affects the pixel ratio not the actual amount of pixels in the DOM. 变换影响像素比率，而不影响DOM中的实际像素数量。

This previous question has some insights and possible solutions. 前一个问题有一些见解和可能的解决方案。

CSS转换比例和JavaScript offsetHeight

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-09-19 16:39:09

CSS转换比例和JavaScript offsetHeight

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-09-19 16:39:09

解决方案1
0 已采纳 2013-09-19 16:39:09