检索CSS值的百分比(在firefox中)

Retrieving percentage CSS values (in firefox)

本文关键字：firefox 百分比 CSS 检索      更新时间：2023-09-26

我在firefox上检索确切的css属性值(在'%'中)有问题。

假设我们有这样一个非常简单的标记:

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

和这个css:

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

和我想检索左侧位置(在'%'中)的js

使用mootools (demo -> http://jsfiddle.net/steweb/AWdzB/):

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

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

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

或纯js (demo -> 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有bug吗?有人知道这是不是已知的bug吗?我做错了什么吗?

谢谢:)

Update:我也在旧的firefox版本上尝试过，它不正确(它总是返回px值)..为了完整起见，它可以在IE

上正常工作

记录如下:

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

似乎没有办法访问给定元素的"指定"css值，除非您确切地知道应用哪个css规则并使用document解析该规则。样式表或类似的界面

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

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

要获得正确的%值(在firefox上也是如此)，元素的(或它的父元素之一)display应该设置为none

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

不清楚的是:为什么在相同的浏览器/版本(见，firefox 7在XP/win7或Opera 11.5在mac osx/ubuntu)，但在不同的操作系统，行为是不同的?

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

据我所知，它从未显示百分比(我使用ff, opera和chrome)。所以我认为这不仅仅是火狐的问题。

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

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

在chrome上它取决于位置值的固定值和绝对值总是显示px而其他值输出的是输入的内容例如如果你输入10%的值它会输出10%如果你输入100px它会输出100px

相关文章：