Question

我在firefox上检索确切的css属性值（在'％'中）时遇到问题。

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

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

和这个css：

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

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

使用mootools非常容易（演示 - ＆gt; http://jsfiddle.net/steweb/AWdzB/）：

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

或jQuery（demo - ＆gt; http://jsfiddle.net/steweb/RaVyU/）：

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

或通过普通js（演示 - ＆gt; 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：

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

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

Answer 2

据我所知，它从未显示百分比（我使用ff，opera和chrome）。所以我认为这不仅仅是一个火狐问题。

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

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

Answer 3

正确答案是对我在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 4

在chrome上，它取决于固定的位置值，绝对值始终为px，而其他值则输出所输入的内容，例如，如果您给它提供10％的值，那么它将输出10％；如果您给它提供100px，则为将输出100px

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

4 个答案: