javascript - 在缩放/缩放变换内计算 div 宽度/高度

Question

我在另一个应用了变换比例的 div 中有一个 div。

我需要在应用缩放后获取此 div 的宽度。 .width() 的结果是元素的原始宽度。

请看这个代码笔: https://codepen.io/anon/pen/ZMpBMP

问题图片:

希望这已经够清楚了，谢谢。代码如下:

---

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  height: 250px;
  width: 250px;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.inner {
  background-color: green;
  height: 10px;
  width: 10px;
  transform: translate(-50%);
  position: absolute;
  top: 50%;
  left: 50%;

  transform: scale(13.0);
}

JS

$(function() {

   var width = $('.inner').width();

   // I expect 130px but it returns 10px
   //
   // I.e. It ignores the zoom/scale
   //      when considering the width
   console.log( width );

});

Answer 1

使用getBoundingClientRect()

$(function() {

   var width = $('.inner')[0].getBoundingClientRect();
   // I expect 130px but it returns 10px
   //
   // I.e. It ignores the zoom/scale
   //      when considering the width
   console.log(width.width);

});

https://jsfiddle.net/3aezfvup/3/