加載后其元素的寬度/高度最初由PERCENTAGE設置的元素如何獲得其實際寬度/高度？

Question

我有一個iframe，其內容指向HTML文檔。

在該HTML文檔中，有一個EMBED元素指向PDF文檔。 此EMBED最初設置的寬度和高度為PERCENTAGE（例如： width: 100%; height: 100% ）。

我的問題是：

加載iframe后，如何獲取EMBED元素的實際 ，絕對寬度和高度（以px，pt，em等為單位）。

我一直在嘗試所有可能的js屬性（寬度，高度，樣式：clientWidth，clientHeight，offsetWidth，offsetHeight ...）以及在jQuery中（例如，outerWidth，outerHeight等），但似乎毫無希望。

Answer 1

這應該返回您需要的內容：

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

id是EMBED元素的唯一ID。

有關此的更多信息：

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

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

Answer 2

您應該使用.offsetWidth和.offsetHeight屬性。 注意！ 它們屬於元素，而不是element.style。

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

它適用於所有現代瀏覽器。 但要小心！ 如果您最近對元素進行了某些DOM修改，則offsetWidth / offsetHeight可以返回0。 修改元素后，可能必須在setTimeout調用中調用此代碼。 也許那是你的問題？

Answer 3

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(); 。