How do I get a computed style?

Question

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?

enter image description here

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

It sounds like you may want to use element.offsetWidth and element.offsetHeight properties but it actually is hard to tell what you really want from your post. — jakubiszon, May 06 '11 at 10:31
yes- i can use any scripting i want. For life i cacnnot get to those values.. i want to set the iframe height based on the computed style.. if i use jquery to get the iframes.docuemnt.height -- Bleee- access denied- for gods sake- so how does the browsers knwo its 1196px??! and its there! so how do i get it :D pretty please — Piotr Kula, May 06 '11 at 10:36
i have read (several * several) articles from SO -- i cannot get a working answer — Piotr Kula, May 06 '11 at 10:39
Which height and width do you actually need? The size of the iframe window of the size of the iframe contents? Please clarify. — jakubiszon, May 06 '11 at 10:40
i need the size of the HTML - the very first element in the iframe. Which is 1196x284. But cross domain policy forbids me to query that — Piotr Kula, May 06 '11 at 10:41
Can you manipulate the contents of both frames? In other words can you put a little script in the iframe and another one and in the outer document? — jakubiszon, May 06 '11 at 10:49
I can- but that is an absolute last resort because it can cause long term problems with management form their side.. i really need the answer to this question.. it must be possible — Piotr Kula, May 06 '11 at 10:53
@ppumkin: If you have already tried several of the _many_ solutions available on Stack Overflow, why don't you show us what you tried and _specifically_ what is not working with them? — Lightness Races in Orbit, May 06 '11 at 11:44

score 50 · Accepted Answer · edited May 23 '17 at 12:32

50

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.

edited May 23 '17 at 12:32

Community

1
1

answered May 06 '11 at 11:43

Lightness Races in Orbit

378,754
76
643
1,055

Thank you! I tested it chrome debug like this and this is the relult window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height"): 150px It should be 1196px Its driving me mental – Piotr Kula May 06 '11 at 12:39
In your screenshot, the `iframe` _does_ look to be about 150px high. The red circled bit is indicating that your `html` element is 1196px. Did you mean to venture into the `iframe`'s DOM? – Lightness Races in Orbit May 06 '11 at 12:48
In IE you can use the `element.currentStyle` property. – geekchic May 06 '11 at 12:51
4

@geekchic: Yes, that's what my answer says. – Lightness Races in Orbit May 06 '11 at 12:51
Yes the iframe is exactly 150px but i am looking for the highlighted Iframes DOM HTML element which is 1196x284 - that is what I have been trying to get – Piotr Kula May 06 '11 at 12:53
how would i traverse to the iframes HTML element. in jquery i would use $('#frameId html') but using the javascript window.getComputedStyle(document.getElementById("frameId html"), null) is obvoisly incorrect – Piotr Kula May 06 '11 at 12:56
2

@Tomalak Ha, so it does. Skimming fail. – geekchic May 06 '11 at 12:57
also i got them to add an ID to the html tag so it read – Piotr Kula May 06 '11 at 12:59
@ppumkin: Oh you did say "I cannot access the iframe (cross domain)". If that's true, then you're SOL. – Lightness Races in Orbit May 06 '11 at 13:04
yea- but surely there must be a way to get the computed sytle in our domain(browser)?? because my screen shot shows that the values are there. How does chrome get those values for eg? – Piotr Kula May 06 '11 at 13:06
or i read somewhere a few times, when i did not need it that the outside domain can add my domain in to somewhere to loosen this restriction? But I cannot for life find it now-- if thats the case do you know about this? Or maybe joining our domains somehow for a more permanently solution on our servers? – Piotr Kula May 06 '11 at 13:09
@ppumkin: By traversing the DOM. – Lightness Races in Orbit May 06 '11 at 13:11
with jquery i managed to get the original values of the HTML height css which is "auto" and other styles which match up..... surely there must be a method to get the calculated style.. so annoying – Piotr Kula May 06 '11 at 13:14
@ppumkin: All the available techniques are described in detail above. Combine them for great success. – Lightness Races in Orbit May 06 '11 at 13:17
Thanks for your time! this is my 2nd day of combining them :D If i am not successful in 3 hours then .. have no idea.. – Piotr Kula May 06 '11 at 13:21
@Kerin: Yea yea yea :) i thought i was on to something..which kinda i was but not all the way. @Tomalak - I cannot even access scrollTop() of the iframe to determine to enlarge or decrease the size of the iframe(this works on document.body) Complete and epic fail question :( Going to use easyxdm for now.. PS Thanks Again! – Piotr Kula May 06 '11 at 18:40
[getComputedStyle](https://caniuse.com/#feat=getcomputedstyle) is available in all browsers now, inc. ie11 – artfulrobot Mar 06 '20 at 14:11

score 12 · Answer 2 · answered Dec 17 '12 at 23:06

12

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>

answered Dec 17 '12 at 23:06

1

That returns the sizes of the frame not the internal page. Why? Because of Cross Site Rules deniying acces to the "client" page so it falls back to the iFrame- The debugger re-renders the HTML and does not use any API to get the actrual client width. So Your answer is wrong in many ways. I just do not want to down vote a newbie – Piotr Kula Dec 20 '12 at 12:53
@ppumkin This does exactly the same thing as Width when it comes to div. Dunno about [i]frames. Got a link to some docs or something? Thanks. – Dec 22 '12 at 22:59

score 3 · Answer 3 · answered Jan 13 '14 at 09:34

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 )

score 0 · Answer 4 · answered Nov 04 '18 at 01:26

If you're already using jQuery, you can use CSS to get the computed /current for any style property in any browser.

$("#el").css("display")

var $el = $("#el");

console.log(".css('display'): " + $el.css("display"))

var el = document.getElementById("el");
el.currentStyle = el.currentStyle || el.style

console.log("style.display: " + el.style.display)
console.log("currentStyle.display: " + el.currentStyle.display)
console.log("window.getComputedStyle: " + window.getComputedStyle(el).display)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="el">element</div>

How do I get a computed style?

4 Answers4

Linked

Related