使用CSS3缩放后获取元素的实际宽度和高度

时间:2011-12-09 12:45:33

标签: javascript css firefox

在Firefox中,我需要缩放包含文本和图像的<div>

使用-moz-transform: scale()后,内容会按比例缩放,但<div>在尝试使用javascript获取这些值时仍会返回原始尺寸。

此行为的任何解决方案?

3 个答案:

答案 0 :(得分:3)

如果您已经知道比例值,请使用一些javascript进行数学计算。将比例值乘以您获得的实际尺寸。 (960px缩放到0.5 = 480px)

如果您不知道比例值,则需要使用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)

答案 1 :(得分:1)

当galer88说:

“在使用-moz-transform:scale()之后,内容会在视觉上缩放,但是当尝试使用javascript获取这些值时,&lt; div&gt;仍会返回原始大小。”

DIV的原始尺寸正在退回,因为事实上真正发生的是ZOOM而不是SCALE。

当你对一个物体进行SCALE时,你应该逐字修改物体的宽度,高度和深度(如果是3D),使其变小或变大。

当您放大或放大时,另一方面,您只需将相机的焦点向后移动或更靠近物体。在缩放过程中,对象的宽度,高度和深度(如果是3D)不受影响。

请在皮埃尔的回答中查看可能的解决方案。

答案 2 :(得分:1)

使用element.getBoundingClientRect()已在此处回答:

CSS3 how to calculate height and width after scale