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

我有一個問題，檢索Firefox上確切的CSS屬性值（在'％'）。檢索百分比CSS值（在Firefox中）

假設我們有這種極其簡單的標記：

<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的（演示 - >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');

但是，如果你嘗試在火狐（8.0 .1）你會看到結果不正確（應該是10％，但是它是91px）。問題是：這個新版本的Firefox有bug嗎？有誰知道這是否是已知的錯誤？難道我做錯了什麼？

謝謝:)

更新：我想它也對老年人的Firefox版本中，這不是正確的（它總是返回像素值）。對於完整性，它正常的IE

來源

2011-12-05 stecb

好問題，老版本報告正確的'％'值？ – Chad

我試圖在運行ffox 5.0的虛擬機上運行，並且它記錄了67.7px ..：/ ..在IE中它是正確的（10％）..later我會嘗試使用ff 6-7，但我認爲它不會起作用。 – stecb

我在Windows XP上用Firefox 7.0得到10％ –

正確的答案是對我上的Bugzilla提交的bug評論

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

爲了得到正確的百分比值（在Firefox太）元素（或其父母之一）display應設置到none

測試：http://jsfiddle.net/4RKsM/

不清楚的是：爲什麼在同一個瀏覽器/版本（見，火狐7的XP/WIN7或Mac OSX上/ Ubuntu的歌劇11.5 ）但在不同的操作系統上，行爲是不同的？

順便說一句，該規範@ thg435發佈（和報告MDN）仍然在不斷變化。

來源

2011-12-06 20:56:35 stecb

由於我知道，它從未顯示過百分比（我使用ff，opera和chrome）。所以我認爲這不僅是一個Firefox的問題。

但是，您可以手動計算它，但如果瀏覽器窗口很小，它就接近定義的值。

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

來源

2011-12-05 15:59:25 tildy

我使用ff/chrome/opera，並且我得到％...我不想進行計算，我只想知道是否可以獲取css屬性的值（以％表示）：） – stecb

Okey，我試過我的，我在歌劇中也得到了一個像素大小。 – tildy

什麼平臺/版本？ :)感謝） – stecb

這是documented：

任何CSS屬性的使用值是該屬性的最終值所有的計算都在執行完。使用的值可以通過調用window.getComputedStyle來獲取。尺寸（例如寬度，行高）都以像素爲單位...等

似乎沒有辦法訪問給定元素的「指定」css值，除非您確切知道應用哪個css規則，使用document.stylesheets或類似的接口解析出這個規則。

來源

2011-12-05 16:07:05 georg

嗯我不明白爲什麼在其他瀏覽器上得到％值呢？並且（如@EmreErkan報道）爲什麼在Firefox上的Firefox 7上也獲得％值？ – stecb

這可能是因爲規範（http://www.w3.org/TR/DOM-Level-2-Style/css）沒有預見到獲取指定值的任何方式。另見本類似的問題：http://stackoverflow.com/questions/1013478/mapping-computed-css-styles-to-specified-ones – georg

我在家裏試着與我的個人計算機（Windows 7，火狐7），並得到' px'值。 –

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

回答

相關問題