Javascript 如何获得计算样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5910004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get a computed style?
提问by Piotr Kula
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.
来自计算样式表 (webkit)。我知道 IE 是不同的 - 像往常一样。我无法访问 iframe（跨域）——我只需要高度/宽度。
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.
这为我提供了 HTML 元素上的实际样式，即“自动”，这是正确的，因为它在 iframe 文档中设置的样式是正确的。
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
使用 Tomalaks 的回答，我为 webkit 想出了这段可爱的脚本
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height")
or
或者
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText
Result 150px
结果 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
所以我让他们在头部添加一个 'brshtml' id - 也许它会帮助我更容易地选择元素。Webkit 检查现在向我显示 html#brshtml 但我无法选择它使用getelementbyid
回答by Lightness Races in Orbit
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.
它不是 jQuery，但在 Firefox、Opera 和 Safari 中，您可以使用它
window.getComputedStyle(element)来获取元素的计算样式，而在 IE 中，您可以使用element.currentStyle. 每种情况下返回的对象都不同，我不确定使用 Javascript 创建的元素和样式的效果如何，但也许它们会很有用。
The iframelooks about 150px high to me. If its contentsare 1196px high (and indeed, you appear to be exploring the htmlnode, according to the screenshot) and that's what you want to get, then you should navigate into the DOM of the iframe's documentand apply the above technique to that.
在iframe大约150像素高，以我的外表。如果它的内容是 1196px 高（实际上，html根据屏幕截图，您似乎正在探索该节点）并且这就是您想要获得的内容，那么您应该导航到 iframe 文档的 DOM并将上述技术应用到它。
回答by Piotr Kula
looking at https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements
查看https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements
Use .clientWidthto get an integer width in px.
使用.clientWidth获取以 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>
回答by Sams
jQuery solution:
jQuery 解决方案：
$(".element").outerWidth( true );
//A Boolean indicating whether to include the element's
//margin in the calculation.
Description: Get the current computed widthfor 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.
描述：获取匹配元素集合中第一个元素的当前计算宽度，包括 padding 和 border。如果在空元素集上调用，则返回值的整数（不带“px”）表示形式或 null。
You can read more about outerWidth/ outerHeightat api.jquery.com
您可以在 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 )
注意：所选元素不能是“display:none”（在这种情况下，您将仅获得填充作为总宽度而没有内部宽度）
回答by KyleMit
Ifyou're already using jQuery, you can use CSSto get the computed /current for any style property in any browser.
如果您已经在使用 jQuery，则可以使用它CSS来获取任何浏览器中任何样式属性的计算值 /current。
$("#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>