如何在加载最初按百分比设置宽度/高度的元素后，获得其实际宽度/高度？

Question

我有一个iframe，它的内容指向一个HTML文档。

在那个HTML文档中，有一个嵌入元素指向一个PDF文档。这个嵌入最初是用宽度和高度百分比(例如：width: 100%; height: 100%)设置的。

我的问题是：

加载iframe后，如何检索实际、绝对宽度和高度(在任何单位px、pt、em等中)嵌入元素的。

我一直在尝试所有可能的js属性(宽度、高度、样式: clientWidth、clientHeight、offsetWidth、offsetHeight.)在jQuery中也是如此(如outerWidth，outerHeight等)但这似乎毫无希望。

Answer 1

这应该会返回您需要的内容：

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

id是嵌入元素的唯一ID。

有关这方面的更多信息：

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

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

Answer 2

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

它使用jQuery的width()和height()。当前，它会找到对象的总宽度/高度，包括填充、边框、边距等。如果要查找元素本身的宽度和高度(不包括边框等)，请将var width = this.offsetWidth;替换为var width = $(this).width();，var height = this.offsetHeight;替换为var height = $(this).height();。

Answer 3

您应该使用.offsetWidth和.offsetHeight属性。注意！它们属于元素，而不是element.style。

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

它适用于所有现代浏览器。但要小心！如果最近对元素进行了某些DOM修改，则偏移宽度/偏移量可以返回0。在修改元素之后，您可能必须在setTimeout调用中调用此代码。也许这就是你的问题？