82206

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

Question:

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 <strong>actual</strong>, 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...) and in jQuery as well (such as outerWidth, outerHeight etc.) but it seems hopeless.

Answer1:

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:

<a href="https://developer.mozilla.org/en/DOM:element.clientHeight" rel="nofollow">https://developer.mozilla.org/en/DOM:element.clientHeight</a>

<a href="https://developer.mozilla.org/en/DOM:element.clientWidth" rel="nofollow">https://developer.mozilla.org/en/DOM:element.clientWidth</a>

Answer2:

<a href="http://jsfiddle.net/purmou/9XXwf/2/" rel="nofollow">http://jsfiddle.net/purmou/9XXwf/2/</a>

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

Answer3:

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?

Recommend

  • auto-resizing text input box html
  • How to automatically adjust content fontsize to fit its span
  • Finding and using hidden properties(such as DisplayRectangle)
  • RTCMulticonnection initiator no camera
  • How to prevent an iframe from re-sizing when zooming
  • Displaying only overlapping parts
  • Get width of specific div and use as another div's height?
  • Javascript on scroll to end
  • How can I exactly fit the size of a map to the container?
  • 1px white spacing in Chrome between div's
  • Resize and repositon div using javascript
  • Multiple responsive video.js players
  • ColdFusion - DateTime Format with GMT offset
  • jquery .height() and .width() on span tag gets inconsistent results
  • Find all paths in a maze using DFS [duplicate]
  • Error in GGally: Error in unit(tic_pos.c, “mm”) : 'x' and 'units' must have leng
  • FOSRestBundle: The controller must return a response (Array()) given
  • Symfony2 and MVC - Is extend controller a good practice?
  • Does CSS support inheritance [duplicate]
  • CSS - Cannot get one spanned style to override another inherited style and align left
  • How To Customize ASP.NET Chart Databound To SqlDataSource
  • Git describe fails to return most recent annotated tag
  • gspread or such: help me get cell coordinates (not value)
  • How do I exclude a dependency in provided scope when running in Maven test scope?
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Change multiple background-images with jQuery
  • Asynchronous UI Testing in Xcode With Swift
  • Q promise. Difference between .when and .then
  • Illegal mix of collations for operation for date/time comparison
  • req.body is undefined - nodejs
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Modifying destination and filename of gulp-svg-sprite
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Unanticipated behavior
  • C# - Getting references of reference