如何获得计算样式？

发布于 2024-11-05 14:26:43 字数 1507 浏览 6 评论 0原文

获取的值的方法

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 元素上的实际样式，即“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 选择它

原文

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.

Screenshot of what I need (circled in red). How do I access those properties?

enter image description here

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.

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

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

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

Result 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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

じее 2024-11-12 14:26:43

请参阅

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

在我看来，iframe 的高度约为 150px。如果它的内容高为1196px（事实上，根据屏幕截图，您似乎正在探索html节点）并且这就是您想要得到的，那么您应该< a href="http://xkr.us/articles/dom/iframe-document/" rel="noreferrer">导航到 iframe 文档的 DOM 并对其应用上述技术。

回复收藏 0 原文

辞慾 2024-11-12 14:26:43

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

looking at https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

Use .clientWidth to get an integer width in 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>

回复收藏 0 原文

旧人 2024-11-12 14:26:43

jQuery 解决方案：

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

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

您可以阅读有关 outerWidth / outerHeight at api.jquery.com

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

jQuery solution:

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

Description: Get the current computed width for 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.

You can read more about outerWidth / outerHeight at 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 )

回复收藏 0 原文

旧城烟雨 2024-11-12 14:26:43

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

If you're already using jQuery, you can use CSS to get the computed /current for any style property in any browser.

$("#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>

回复收藏 0 原文

~没有更多了~

关于作者

仲春光

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

如何获得计算样式？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

西西弗的石头怪

5397313

烟沫凡尘

一个破名字

萌︼了一个春

当爱已成负担

友情链接

如何获得计算样式？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

西西弗的石头怪

5397313

烟沫凡尘

一个破名字

萌︼了一个春

当爱已成负担

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。