Menu
Can anybody please help me with a script.. or a way to get the value of
height : 1196px; width: 284px; from the computed style sheet (webkit). I know IE is different- as usual. I cannot access the iframe (cross domain)—I just need the height/width.
Screenshot of what I need (circled in red). How do I access those properties?
Source
<iframe id="frameId" src="anotherdomain\brsstart.htm"> <html id="brshtml" xmlns="http://www.w3.org/1999/xhtml"> \--I WANT THIS ELEMENTS COMPUTED BROWSER CSS HEIGHT/WIDTH <head> <title>Untitled Page</title> </head> <body> BLA BLA BLA STUFF </body> </html> \--- $('#frameId').context.lastChild.currentStyle *This gets the actual original style set on the other domain which is "auto" *Now how to getComputed Style? </iframe> The closest I got is this
$('#frameId').context.lastChild.currentStyle That gives me the actual style on the HTML element which is "auto" and that is true as thats what's its set on the iframed document.
How do I get the computed style that all the browsers use to calculate the scroll bars, and inspect elements values?
Using Tomalaks answer I conjured up this lovely piece of script for webkit
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height") or
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText Result 150px
Identical to
$('#frameId').height(); So I got them to add a id of 'brshtml' to the head- maybe it will help me select the element easier. Webkit inspection shows me now html#brshtml but I cant select it using getelementbyid
722
A “computed style” is all the styles that applies to the element, even if there's no CSS specified for that element. For example, consider the color of a element, the element itself may not have a CSS color spec, but it inherit styles from parent element, or from browser's initial value for that property.
The computed value of a CSS property is the value that is transferred from parent to child during inheritance. It is calculated from the specified value by: Handling the special values inherit , initial , revert , revert-layer , and unset .
getComputedStyle() The Window. getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
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 useelement.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.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
