IT技术 - 如何获得计算样式？ - 吾爱随笔录

如何获得计算样式？

IT技术 javascript html css cross-domain computed-style

2021-01-30 21:02:10

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

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 元素上的实际样式，即“自动”，这是正确的，因为它在 iframe 文档上设置的样式是正确的。

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

使用 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个回答

看到这个答案。

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

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

在你的屏幕截图中，iframe 确实看起来是大约150像素高。红色圆圈位表示您的html元素为 1196 像素。您的意思是要冒险进入iframeDOM 吗？

2021-03-16 21:02:10

@Tomalak Ha，确实如此。略读失败。

2021-03-16 21:02:10

@geekchic：是的，这就是我的回答。

2021-03-23 21:02:10

在 IE 中，您可以使用该element.currentStyle属性。

2021-03-26 21:02:10

谢谢！我像这样测试了 chrome 调试，这是 relult window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height"): 150px 它应该是 1196px 它让我精神恍惚

2021-03-29 21:02:10

查看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 来获取实际客户端宽度。所以你的答案在很多方面都是错误的。我只是不想给新手投反对票

2021-03-28 21:02:10

@ppumkin 对于 div，这与 Width 的作用完全相同。不知道 [i] 帧。有一些文档或其他东西的链接吗？谢谢。

2021-04-12 21:02:10

jQuery 解决方案：

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

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

您可以在 api.jquery.com 上阅读有关外层宽度/外层高度的更多信息

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

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

其它你可能感兴趣的问题

上一篇Javascript 有类似 Ruby 的 method_missing 功能吗？下一篇forEach 函数调用的调用上下文（this）