使用CSS3縮放後獲取元素的實際寬度和高度

在Firefox中，我需要縮放包含文本和圖像的<div>。使用CSS3縮放後獲取元素的實際寬度和高度

使用-moz-transform: scale()之後，內容在視覺上被縮放，但當嘗試使用javascript獲取這些值時，<div>仍會返回原始大小。

這種行爲的任何解決方案？

2011-12-09 galer88

可不可以給一段代碼重現你做了什麼？我想你已經看過這裏推薦的網頁：http://stackoverflow.com/questions/4049342/how-can-i-zoom-a-div-in-firefox-and-opera – Nikodemus

如果您已經知道比例值，請使用一點javascript來進行數學運算。將比例值乘以您獲得的實際尺寸。 （960像素縮放到0.5 = 480像素）

如果你不知道的刻度值，則需要使用getComputedStyle()獲得當前轉換矩陣，然後做數學。

var element = document.getElementById("divScaledToHalf"), 
    style = window.getComputedStyle(element, ""), 
    matrix = style.getPropertyValue("-moz-transform"); 

console.log(matrix); // matrix(0.5, 0, 0, 0.5, 0px, 0px)

來源

2011-12-09 13:35:22 Pierre

請注意，你需要查詢每個瀏覽器前綴的屬性值（除非你確定在Chrome/Safari中），下面是我如何進一步爲我的目的（在這個問題中討論http://stackoverflow.com/questions/9791403/ how-to-get-actual-not-original-height-of-css-rotated-element）：http://jsfiddle.net/NPC42/nhJHE/ – NPC

當galer88說：

「使用-moz-改造後：規模（）的內容是視覺縮放但<DIV>仍然返回試圖讓使用javascript這些值時，它的原始大小。「

DIV的原始尺寸正在返回，因爲實際上真正發生的是縮放而不是縮放。當你縮放一個對象時，你應該從字面上修改對象的寬度，高度和深度（在3D的情況下）以使其變得更小或更大。

另一方面，當您放大或縮小時，只需將相機的焦點移回或靠近物體。對象的寬度，高度和深度（在3D情況下）在縮放過程中不受影響。

請在Pierre的答案中檢查可能的解決方案。

來源

2012-01-19 20:50:19

在Chrome中使用開發工具時，一個受檢查的元素顯示放大時值不一樣。元素的大小取決於縮放係數。 – CaptainBli

使用element.getBoundingClientRect()它已經在這裏找到答案：

CSS3 how to calculate height and width after scale

來源

2017-08-02 12:25:22

使用CSS3縮放後獲取元素的實際寬度和高度

回答

相關問題