检索 CSS 百分比值（在 Firefox 中）

Question

我在 Firefox 上检索确切的 css 属性值（以“%”为单位）时遇到问题。

假设我们有这个非常简单的标记：

<div id="box">box</div>

和这个css：

#box{
    width:200px;
    height:200px;
    left:10%;
    position:absolute;
    background:red;
}

和我想通过js检索左侧位置（在'％'中）

使用mootools显然非常容易（演示-> http://jsfiddle.net/steweb/AWdzB/):

var left = $('box').getStyle('left');

或 jQuery (演示-> http://jsfiddle.net/steweb/RaVyU/):

var left = $('#box').css('left');

或通过普通 js (演示 -> http://jsfiddle.net/steweb/tUAKA/)：

function getStyle(el,styleProp){ //from ppk's quirksmode
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

var left = getStyle('box','left');

但是如果你尝试在 firefox (8.0.1) 上你会发现结果不正确（应该是 10%，但它是 91px）。问题是：这个新版本的 Firefox 是否有错误？有谁知道这是否是一个已知的错误？我做错了什么吗？

谢谢:)

更新：我也在较旧的 Firefox 版本上尝试过，但它不正确（它总是返回 px 值）..为了完整性，它在 IE 上可以正常工作

Answer 1

这是记录：

任何 CSS 属性的使用值都是执行所有计算后该属性的最终值。可以通过调用 window.getCompulatedStyle 来检索已使用的值。尺寸（例如宽度、行高）均以像素为单位...等

为单位...等似乎无法访问给定元素的“指定”CSS值，除非您确切知道适用哪个CSS规则并使用文档解析出此规则.stylesheets 或类似的界面。

Answer 2

正确答案是对我在 bugzilla 上提交的错误的评论

https://bugzilla。 mozilla.org/show_bug.cgi?id=707691#c7

获取元素（或其父元素之一）的正确 % 值（在 Firefox 上也是如此） display 应设置为 none

测试：http://jsfiddle. net/4RKsM/

不清楚的是：为什么在相同的浏览器/版本上（参见 XP/win7 上的 firefox 7 或 mac osx / ubuntu 上的 Opera 11.5）但在不同的操作系统上，行为有什么不同吗？

顺便说一句，@thg435 发布（并在 mdn 上报告）的规范仍在不断变化。

Answer 3

据我所知，它从未显示过百分比（我使用 ff、opera 和 chrome）。所以我认为这不仅仅是 firefox 的问题。

但是，您可以手动计算它，但如果浏览器窗口很小，它只是接近定义的值。

parseInt($('#box').css('left'))/ $(window).width()*100;

Answer 4

在chrome上，它取决于位置值fixed和absolute总是给出一个px，而其他值输出输入的内容，例如，如果你给它10％的值，那么它会输出10％，如果你输入100px，那么它会输出100px