Question

任何人都可以帮我一个脚本..或者一种获得

值的方法

height : 1196px;
width: 284px;

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

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

enter image description here

来源

<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元素的实际样式，即“auto”，这就是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

选择它

Answer 1

请参阅this answer。

这不是jQuery，而是在Firefox中，Opera 和Safari你可以使用 window.getComputedStyle(element)来获取元素的计算样式在IE中你可以使用 element.currentStyle。归来了对象在每种情况下都不同，而且我不确定这两种方法都有效使用创建的元素和样式 Javascript，但也许他们会是有用的。

iframe看起来高达150px。如果它的内容是1196px高（事实上，你似乎正在探索html节点，根据屏幕截图），那就是你想得到的，那么你应该{{3}并将上述技术应用于此。

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

Answer 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”（在这种情况下，您只会将填充作为总宽度而不是内部宽度）

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

我如何获得计算样式？

4 个答案: