我将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')
的实际尺寸?
比例是从另一个过程应用的,我无法访问比例因子。
答案 0 :(得分:1)
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>