我將transform: scale(n)
應用於div後,我通過javascript獲得的width
和height
保持不變。如何在應用變換比例後檢索div的實際大小?
下面舉例說明設置。
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')
的實際尺寸?
從另一個過程中應用比例尺,我無法獲取比例因子。
乘大小與規模有多大? –
比例因子不適用於我。 –
你可以明顯地使用'element.getBoundingClientRect()'(在這裏找到:https://stackoverflow.com/questions/5603615/get-the-scale-value-of-an-element) –