如何获得计算样式？答案

【问题标题】：How do I get a computed style?如何获得计算样式？
【发布时间】：2011-08-20 01:57:08
【问题描述】：

任何人都可以帮我写一个脚本..或获得价值的方法

height : 1196px;
width: 284px;

来自计算的样式表（webkit）。我知道 IE 和往常一样不同。我无法访问 iframe（跨域）——我只需要高度/宽度。

我需要的屏幕截图（红色圈出）。如何访问这些属性？

来源

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

我得到的最接近的是这个

$('#frameId').context.lastChild.currentStyle

这给了我 HTML 元素的实际样式，即“自动”，这是真的，因为这就是它在 iframed 文档上的设置。

如何获得所有浏览器用来计算滚动条和检查元素值的计算样式？

使用 Tomalaks 的答案，我为 webkit 变出了这段可爱的脚本

window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height")

或

window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText

结果 150 像素

与

相同

$('#frameId').height();

所以我让他们在头部添加一个 'brshtml' 的 id - 也许这会帮助我更轻松地选择元素。 Webkit 检查现在向我显示 html#brshtml 但我无法使用 getelementbyid 选择它

【问题讨论】：

查看本页的“相关”部分...
听起来您可能想使用 element.offsetWidth 和 element.offsetHeight 属性，但实际上很难从帖子中说出您真正想要什么。
是的——我可以使用任何我想要的脚本。对于生活，我无法获得这些值..我想根据计算的样式设置 iframe 高度..如果我使用 jquery 来获取 iframes.docuemnt.height - Bleee- 访问被拒绝 - 看在上帝的份上 - 那么如何浏览器知道它的 1196px 吗？？！它就在那里！那我怎么得到它：D漂亮请
我已经阅读了 SO 的（几篇 * 几篇）文章——我无法得到有效的答案
您实际需要哪个高度和宽度？ iframe 窗口的大小与 iframe 内容的大小有关吗？请澄清。

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

【解决方案1】：

见this answer。

它不是 jQuery，而是在 Firefox 中，Opera 和你可以使用的 Safari window.getComputedStyle(element) 到获取元素的计算样式在 IE 中你可以使用 element.currentStyle。返回的每种情况下的对象都不一样，而且我不确定两者的效果如何使用创建的元素和样式 Javascript，但也许他们会有用。

iframe 在我看来大约 150 像素高。如果它的 contents 是 1196px 高（实际上，根据屏幕截图，您似乎正在探索 html 节点）并且这就是您想要得到的，那么您应该 navigate into the DOM of the iframe's document 并应用以上技术。

【讨论】：

谢谢！我像这样测试了它的 chrome 调试，这是 relult window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height"): 150px 它应该是 1196px 它让我很精神
在您的屏幕截图中，iframe 确实看起来大约有 150 像素高。红色圆圈表示您的 html 元素为 1196px。你是想冒险进入iframe 的 DOM 吗？
在IE中你可以使用element.currentStyle属性。
@geekchic：是的，这就是我的回答。
@Tomalak Ha，确实如此。略读失败。

【解决方案2】：

看着https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

使用 .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>

【讨论】：

返回框架的大小而不是内部页面。为什么？由于跨站点规则拒绝访问“客户端”页面，因此它回退到 iFrame - 调试器重新呈现 HTML 并且不使用任何 API 来获取实际的客户端宽度。所以你的答案在很多方面都是错误的。我只是不想对新手投反对票
@ppumkin 当涉及到 div 时，它的作用与 Width 完全相同。不知道 [i] 帧。有一些文档或其他东西的链接吗？谢谢。

【解决方案3】：

jQuery解决方案：

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

描述：获取匹配元素集中第一个元素的当前计算宽度，包括填充和边框。返回值的整数（不带“px”）表示，如果在一组空元素上调用，则返回 null。

您可以在 api.jquery.com 上阅读有关 outerWidth / outerHeight 的更多信息

注意：所选元素不得为“display:none”（在这种情况下，您将仅获得填充作为总宽度而没有内部宽度）

【讨论】：

【解决方案4】：

如果您已经在使用 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>

【讨论】：