javascript - 检索百分比 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

这是 documented :

The used value of any CSS property is the final value of that property after all calculations have been performed. Used values can be retrieved by calling window.getComputedStyle. Dimensions (e.g. width, line-height) are all in pixels... etc

似乎没有办法访问给定元素的“指定”css 值，除非您确切知道适用哪个 css 规则并使用 document.stylesheets 或类似界面解析该规则。