javascript - Get actual width and height of an element after being scaled using CSS3 - Stack Overflow

admin管理员组

文章数量:1357307

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?

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?

• javascript
• css
• firefox

Share Improve this question Follow edited Dec 9, 2011 at 13:56 Pierre 19.1k55 gold badges4343 silver badges6262 bronze badges asked Dec 9, 2011 at 12:45 galer88galer88 24044 silver badges1515 bronze badges 1

• 1 Could you give a piece of code to reproduce what you do? And I guess you've had a look at the pages reended here: stackoverflow./questions/4049342/… – Nikodemus RIP Commented Dec 9, 2011 at 12:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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)

Use element.getBoundingClientRect() its already answered here:

CSS3 how to calculate height and width after scale

When galer88 says:

"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."

The DIV's original sizes are being returned because in fact what is really happening is a ZOOM and not a SCALE.

When you SCALE an object, you should literally modify the width, height, and depth (in case of 3D) of the object to make it smaller or larger.

When you ZOOM out or in, on the other hand, you simply move the camera's focus further back or nearer to the object. The object's width, height, and depth (in case of 3D) are not affected during zooming.

Please check a possible solution in Pierre's answer.

本文标签： javascriptGet actual width and height of an element after being scaled using CSS3Stack Overflow