javascript - 应用变换比例后如何检索 div 的实际大小？

Question

在我将 transform: scale(n) 应用于 div 之后，我通过 javascript 获得的 width 和 height 保持不变。

以下说明了设置。

console.log($('.parent1').width())
console.log('parent1 w ' + $('.parent1 .container').width())
console.log('parent1 h ' + $('.parent1 .container').height())

$('.parent2').css('transform', 'scale(1.5)')
console.log('parent2 w ' + $('.parent2 .container').width())
console.log('parent2 h ' + $('.parent2 .container').height())

.parent {
  width: 250px;
}

.parent1 {
  height: 100px;
}

.parent2 {
  height: 100px;
}

.container {
  display: block;
  height:50%;
  width:50%;
  margin:auto;
  border:solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent parent1">
  <div class="container">
  </div>
</div>

<div class="parent parent2">
  <div class="container">
  </div>
</div>

从控制台的打印结果可以看出，第二个容器的宽高与第一个相同。然而，对于用户来说，第二个容器实际上更大。

如何获取$('.parent2 .container')的实际大小？

比例是从另一个进程应用的，我无法访问比例因子。

Answer 1

使用getBoundingClientRect()

console.log($('.parent1').width())
console.log('parent1 w ' + $('.parent1 .container').width())
console.log('parent1 h ' + $('.parent1 .container').height())

$('.parent2').css('transform', 'scale(1.5)')
console.log('parent2 w ' + $(".parent2 .container")[0].getBoundingClientRect().width)
console.log('parent2 w ' + $(".parent2  .container")[0].getBoundingClientRect().height)

.parent {
  width: 250px;
}

.parent1 {
  height: 100px;
}

.parent2 {
  height: 100px;
}

.container {
  display: block;
  height:50%;
  width:50%;
  margin:auto;
  border:solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent parent1">
  <div class="container">
  </div>
</div>

<div class="parent parent2">
  <div class="container">
  </div>
</div>