How to get actual width/height of some element after loading whose width/height originally set by PERCENTAGE?

I have an iframe, whose content points to an HTML document.

In that HTML document, there's an EMBED element pointing to a PDF document. This EMBED originally set up with width and height in PERCENTAGE (such as: width: 100%; height: 100%).

My question is:

After the iframe has been loaded, how can I retrieve the actual, absolute width and height (in any unit px, pt, em etc.) of the EMBED element.

I've been trying on all possible js properties (width, height, style: clientWidth, clientHeight, offsetWidth, offsetHeight...) an开发者_高级运维d in jQuery as well (such as outerWidth, outerHeight etc.) but it seems hopeless.

---

This should return what you need:

document.getElementById("id").clientHeight 
document.getElementById("id").clientWidth 

id is a unique ID of the EMBED element.

For more about this:

https://developer.mozilla.org/en/DOM:element.clientHeight

https://developer.mozilla.org/en/DOM:element.clientWidth

---

http://jsfiddle.net/purmou/9XXwf/2/

This uses jQuery's width() and height(). Currently it finds the total width/height of an object, including padding, border, margins, etc. If you'd like to find the width and height of the element itself, excluding the the borders, etc., replace var width = this.offsetWidth; with var width = $(this).width(); and var height = this.offsetHeight; with var height = $(this).height();.

---

You should use the .offsetWidth and .offsetHeight properties. Note! they belong to the element, not element.style.

var width = document.getElementById('foo').offsetWidth; 

It works in all modern browsers. But beware! offsetWidth/offsetHeight can return 0 if you've done certain DOM modifications to the element recently. You may have to call this code in a setTimeout call after you've modified the element. Maybe that was your issue?