使用CSS3缩放后获取元素的实际宽度和高度 [英] Get actual width and height of an element after being scaled using CSS3

问题描述

在Firefox中，我需要缩放包含文本和图片的< div> 。

-moz-transform：scale（）内容可视化缩放，但< div> 仍会返回其原始大小

解决方案

div>

如果你已经知道scale值，使用一点javascript来做数学。将比例值乘以您获得的实际尺寸。 （960px缩放到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）
  

In Firefox, I need to scale a <div> containing text and images.

After using -moz-transform: scale() the content is visually scaled but the <div> still returns it's original sizes when trying to get these values using javascript.

Any solution for this behaviour?

解决方案

If you already know the scale value, do the math using a bit of javascript. Multiply the scale value by the actual sizes you are getting. (960px scaled to 0.5 = 480px)

If you don't know the scale value, you need to get the current transformation matrix using getComputedStyle() and then do the math.

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)

这篇关于使用CSS3缩放后获取元素的实际宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！