Firefox的問題與currentStyle vs getComputedStyle

我想根據它的CSS規則得到一個元素的寬度問題是，「getComputedStyle」返回一個像素值而不是「自動」的元素沒有CSS寬度值設置的元素。在Opera中，「elem.currentStyle ['width']」返回「auto」，但在firefox中，它必須使用「getComputedStyle」，它返回類似「1149px」的內容。Firefox的問題與currentStyle vs getComputedStyle

對我來說知道實際的CSS規則是什麼是至關重要的。除了getComputedStyle之外，還有其他的方法嗎？ The Firefox MDN明確表示「getComputedStyle」不是要走的路，但我找不到任何與「currentStyle」等效的Firefox文檔。

如果您想知道，我的最終目標是找到頁面上最大的靜態寬度元素。如果我無法讀取樣式表值 - 僅渲染/計算值 - 那麼我該如何實現？

來源

2011-08-29 rburgenson

如果您從一個元素開始，則無法知道應用了哪個樣式表規則。 getComputedStyle()僅僅爲您提供了有效的樣式值，而currentStyle並沒有太大的不同，即使它恰好給出了您在此特定場景和此特定瀏覽器中所期望的結果。

你可能需要做的是改爲通過樣式表。沿着線：

for (var i = 0; i < document.styleSheets.length; i++) 
{ 
    var styleSheet = document.styleSheets[i]; 
    for (var j = 0; j < styleSheet.cssRules.length; j++) 
    { 
    var rule = styleSheet.cssRules[j]; 
    if (rule.type == 1) // STYLE_RULE 
    { 
     // Do something with rule.style.width 
    } 
    } 
}

然後，如果您需要查找的元素匹配規則，可以選擇使用document.querySelectorAll()與rule.selectorText。剩下的問題是多個樣式規則可能適用於相同的元素，並且需要計算規則的特殊性。不知道這對你有多大的問題。

附加文檔：

來源

2011-08-29 07:16:48

我希望避免在樣式表中循環，因爲從性能的角度來看，這可能會很麻煩，但我認爲憑藉一些直覺，我可以完成這項工作。 – rburgenson

P.S.你會知道一個快速的方法來找到一個css規則（沒有jquery）的類名，而不需要遍歷樣式表尋找「className ='any'」嗎？也就是說，有沒有「document.getCSSRuleByClass（）」或類似的東西？ – rburgenson

不，我不認爲有這樣的事情。 –

如果你只是想獲取該元素尺寸，爲什麼不使用

element.clientWidth或element.clientHeight

的getcomputestyle不是用來檢索元素的寬度或高度

來源

2011-08-29 04:56:11 wukong

的OP希望找到，如果一個元素被限定的寬度，而不僅僅是具有所計算的寬度。 –

~~不幸的是，據我知道有沒有現實的方式來實現這一點。~~

編輯：上面的答案循環通過樣式表是你最好的選擇。我原本想訪問樣式表，但沒有想到使用querySelectorAll。爲了獲得天才解決方案，弗拉基米爾帽子。

我能想到的唯一的解決方案是爲元素你設置一個寬度，也設置一些其他不常用的風格的東西，不會真正影響到什麼，所以你可以測試爲了那個原因。

div { 
    width: 35px; 
    min-width: 1px; /* the flag */ 
    }

所以再想找一個具有指定寬度的元素時，你可以看看[ComputedStyle] .minWidth ==「1px的」第一。

相當不好的解決方案，但它會完成工作。

您也可以爲具有設置寬度的元素設置一個隨機類名稱，然後您只需查詢具有該類名稱的元素即可。雖然它不是一個非常動態的解決方案。

來源

2011-08-29 05:29:08

這是一個好主意，但肯定是不吉利的。我認爲弗拉基米爾關於循環遍歷樣式表的建議更簡潔一點 – rburgenson

Firefox的問題與currentStyle vs getComputedStyle

回答

相關問題