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

在Firefox中，我需要缩放包含文本和图像的

使用

-moz transform:scale（）

后，内容会进行视觉缩放，但在尝试使用javascript获取这些值时，

仍会返回其原始大小

---

对于这种行为有什么解决方案吗？

如果您已经知道刻度值，请使用一点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)

当galer88说：

“使用-moz transform:scale（）后，内容会进行视觉缩放，但在尝试使用javascript获取这些值时，仍会返回其原始大小。”

将返回DIV的原始大小，因为实际上实际发生的是缩放而不是缩放

在缩放对象时，应严格修改对象的宽度、高度和深度（在3D情况下），使其变小或变大

另一方面，当您缩小或放大时，您只需将相机的焦点移得更远或更靠近对象。在缩放过程中，对象的宽度、高度和深度（在3D情况下）不受影响

---

请检查Pierre答案中可能的解决方案。

使用

元素。getBoundingClientRect（）

此处已给出答案：

---

您能给我一段代码来重现您的工作吗？我想您已经看过这里推荐的页面了：注意，您需要查询每个浏览器前缀的属性值（除非您在Chrome/Safari中确定），以下是我如何进一步实现我的目的（在本问题中讨论）：在Chrome中使用开发工具，检查的元素显示缩放时的值不相同。元素的大小取决于缩放因子。