Javascript 检索CSS值百分比（在firefox中）

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

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

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

而我想通过js检索左侧位置（“%”）

使用mootools（演示->）obv非常简单：

或jQuery（演示->）：

或者通过简单的js（演示->）：

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

谢谢：）

---

更新：我在较旧的firefox版本上也尝试过，但不正确（它总是返回px值）。。为了完整起见，它在IE上正常工作，正如我所知，它从未显示过百分比（我使用ff、opera和chrome）。所以我认为这不仅仅是firefox的问题

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

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

这是：

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

---

似乎无法访问给定元素的“指定”css值，除非您确切知道应用了哪个css规则，并使用document.stylesheets或类似接口解析出该规则。

正确答案是对我在bugzilla上提交的错误的注释

要获得正确的%值（在firefox上也是如此），元素（或其父元素之一）

display

应设置为

none

测试：

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

---

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

在chrome上，它取决于位置值，固定值和绝对值总是给出一个px，而其他值输出输入的值。例如，如果你给它10%的值，那么它将输出10%，如果你输入100px，那么它将输出100px

好问题，旧版本是否报告了正确的

%

值？我在运行ffox 5.0的VM上进行了尝试，它的日志记录为67.7px../。。在IE上这是正确的（10%）。稍后我会尝试使用ff 6-7，但我认为它不会起作用。在Windows上使用Firefox 7.0，我得到了10%XP@EmreErkan谢谢我在mac os上尝试了ffox 7.0，但我得到了47像素。。真的weird@EmreErkan47px obv取决于窗口的宽度。。。这很奇怪，因为它应该是一个已知的bug（如果它从5.0开始就存在的话，它已经被修复了）：）嗯，我不明白。。为什么在其他浏览器上你会得到%的值呢？（正如@EmreErkan所报告的）为什么在windows上的Firefox7上你也会得到%的值？这可能是因为规范（）没有预见到任何获得指定值的方法。另请看这个类似的问题：我在家里用我的个人电脑（Windows7，Firefox7）试过，得到了

px

值。我使用ff/chrome/opera，得到了%。。。我不想计算，我只想知道是否有可能得到css属性的值（用%：）好的，我已经试过了，我在opera中也得到了一个像素大小。这是Baaad:）。。我的意思是，相同的版本但不同的操作系统，它有完全不同的行为。。奇怪的谢谢顺便说一句：）请你解释一下计算方法好吗？为什么css（左）/window.width*100？这是从哪里来的？

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

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

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');

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