2017-12-18 169 views
0

我將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')的實際尺寸?

從另一個過程中應用比例尺,我無法獲取比例因子。

+2

乘大小與規模有多大? –

+0

比例因子不適用於我。 –

+1

你可以明顯地使用'element.getBoundingClientRect()'(在這裏找到:https://stackoverflow.com/questions/5603615/get-the-scale-value-of-an-element) –

回答

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>

+0

爲什麼縮放的寬度/高度不是原始寬度/高度的1.5倍? –

+0

@AnonyKong回答更新,現在檢查 – Akasa

相關問題