How do I get a computed style?

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")

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

标签： javascript html css cross-domain computed-style

4条回答

再贱就再见

2楼-- · 2019-01-03 06:55

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>

0人赞添加讨论(0) 举报

闹够了就滚

3楼-- · 2019-01-03 07:16

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.

0人赞添加讨论(0) 举报

相关推荐>>

4楼-- · 2019-01-03 07:17

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 )

0人赞添加讨论(0) 举报

The star\"

5楼-- · 2019-01-03 07:19

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>

0人赞添加讨论(0) 举报

How do I get a computed style?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间