如何在应用变换比例后检索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>