43

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

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

结果 150px

相同

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

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

4

4 回答 4

48

看到这个答案。

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

对iframe我来说看起来大约 150px 高。如果它的内容是 1196px 高（实际上，根据屏幕截图，您似乎正在探索该html节点）并且这就是您想要得到的，那么您应该导航到 iframe 文档的 DOM并应用上述技术。

于 2011-05-06T11:43:04.497 回答
12

查看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>
于 2012-12-17T23:06:31.380 回答
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”（在这种情况下，您将仅获得填充作为总宽度而没有内部宽度）

于 2014-01-13T09:34:36.117 回答
0

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

于 2018-11-04T01:26:48.507 回答