How do I get a computed style?

Solution 1:

See this answer.

It's not jQuery but, in Firefox, Opera and Safari you can use window.getComputedStyle(element) to get the computed styles for an element and in IE you can use element.currentStyle. The returned objects are different in each case, and I'm not sure how well either work with elements and styles created using Javascript, but perhaps they'll be useful.

The iframe looks about 150px high to me. If its contents are 1196px high (and indeed, you appear to be exploring the html node, according to the screenshot) and that's what you want to get, then you should navigate into the DOM of the iframe's document and apply the above technique to that.

Solution 2:

looking at https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

Use .clientWidth to get an integer width in px.

<div id="mydiv" style="border:1px solid red;">This is DIV contents.</div>
<button onclick="alert(
document.getElementById('mydiv').clientWidth);">
   Click me to see DIV width in px
</button>

Solution 3:

jQuery solution:

$(".element").outerWidth( true ); 
//A Boolean indicating whether to include the element's 
//margin in the calculation.

Description: Get the current computed width for the first element in the set of matched elements, including padding and border. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.

You can read more about outerWidth / outerHeight at api.jquery.com

Note: the selected element must not be "display:none" (in this case you will get only the paddings as total width without the inner width )