Как получить фактическую ширину / высоту некоторого элемента после загрузки, ширина / высота которого изначально установлена ​​PERCENTAGE?

Question

У меня есть iframe, содержимое которого указывает на документ HTML.

В этом документе HTML есть элемент EMBED, указывающий на документ PDF.Это EMBED изначально настроено с шириной и высотой в PERCENTAGE (например: width: 100%; height: 100%).

Мой вопрос:

После загрузки iframe, как я могу получить фактический , абсолютная ширина и высота (в любых единицах px, pt, em и т. д.) элемента EMBED.

Я пробовал все возможные свойства js (ширина, высота, стиль:clientWidth, clientHeight, offsetWidth, offsetHeight ...), а также в jQuery (например, externalWidth, outerHeight и т. д.), но это кажется безнадежным.

Answer 1

Это должно вернуть то, что вам нужно:

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

id - это уникальный идентификатор элемента EMBED.

Подробнее об этом:

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; 

Работает во всех современных браузерах. Но будьте осторожны! offsetWidth / offsetHeight может возвращать 0, если вы недавно выполнили определенные модификации DOM элемента Возможно, вам придется вызывать этот код в вызове setTimeout после изменения элемента. Может быть, это была ваша проблема?

Answer 3

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

Используются jQuery's width() и height().В настоящее время он находит общую ширину / высоту объекта, включая отступы, границы, поля и т. Д. Если вы хотите найти ширину и высоту самого элемента, исключая границы и т. Д., Замените var width = this.offsetWidth; наvar width = $(this).width(); и var height = this.offsetHeight; с var height = $(this).height();.