如何在应用变换比例后检索div的实际大小?

我将transform: scale(n)应用于div后,我通过javascript获得的widthheight保持不变。如何在应用变换比例后检索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')的实际尺寸?

从另一个过程中应用比例尺,我无法获取比例因子。

回答:

使用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>

以上是 如何在应用变换比例后检索div的实际大小? 的全部内容, 来源链接: utcz.com/qa/263055.html

回到顶部