在運行時確定元素通過JavaScript實現了哪種樣式

我想使用JavaScript來獲取其樣式已由樣式表更改的元素的計算樣式。元素的樣式不會通過內聯CSS更改，這意味着style屬性根本沒有幫助。我在HTML中找到的唯一可能有用的函數是getComputedStyle。在運行時確定元素通過JavaScript實現了哪種樣式

使用getComputedStyle的問題是，即使樣式表沒有爲該元素重新定義它，它也會返回元素的所有屬性。

例如，假設我有以下樣式：

body { 
    font-size: 13px; 
} 
div { 
    color: blue; 
} 
.example { 
    font-weight: bold; 
}

...和下面的HTML：

<body> 
    <div> 
    This is a <span class="example">test</span> 
    </div> 
</body>

當我運行span元素在下面的JavaScript：

window.getComputedStyle(spanElement)

...我得到該元素的所有CSS屬性：

background-attachment: scroll; background-clip: border-box; background-color: 
rgb(255, 255, 255); background-image: none; background-origin: padding-box; 
[...] 
text-anchor: start; writing-mode: lr-tb; glyph-orientation-horizontal: 0deg; 
glyph-orientation-vertical: auto; -webkit-svg-shadow: none; vector-effect: none;

我想要的只是元素重新定義的樣式（即，在這個例子中，它將是：

font-weight: bold;

有什麼簡單的方法可以獲得這些信息嗎？如果不是，獲得這些結果的最佳方法是什麼？理想情況下，我想要一個解決方案/算法，可以快速運行數百個這些元素。

最初我以爲我可以遍歷節點的父元素並比較所有的值以確定哪些元素沒有被繼承，但是爲每個節點比較一百個屬性似乎效率很低。只有十幾個不同的類，但每個類可以出現幾百次，因此，某種緩存機制可以顯着提高性能。

我對緩存值的第一個想法是存儲類名稱及其值（例如cachedValues['.example'] := 'font-weight: bold;'）。這種方法的問題是CSS選擇器可能非常複雜。例如，某些屬性是從父項繼承的，這意味着在原始CSS示例中，不在div內的span將呈現不同的效果。所以我想我可以在緩存值中包含父項（例如cachedValues['div span.example'] := 'font-weight: bold;'）。這裏的問題是，CSS選擇器可以通過僞類（例如:first-child）變得更加複雜。

實施例的CSS：

div:first-child { 
    color: red; 
} 
div { 
    color: blue; 
}

例HTML：

<body> 
    <div>Red line</div> 
    <div>Blue line</div> 
</body>

在這個例子中，如果我存儲cachedValues['div'] := 'font-color: red;'，這將是不正確的第二行。

對於如何解決這個問題你有什麼建議嗎？

來源

2011-01-05 Senseful

也許你可以通過檢查頭部的鏈接元素來獲取外部的css文件並解析它。 – Stephen 2011-01-05 22:43:04

這意味着如何使用？如果不是直接在網頁上，它是否可以作爲瀏覽器擴展？ Firebug已經能夠爲單個元素做到這一點。您可以編寫一個螢火蟲擴展程序，爲每個元素輸出這些信息。 – 2011-01-05 22:44:54

任何瀏覽器限制？如果您使用的是getComputedStyle，那麼您將不再使用IE – Hemlock 2011-01-05 23:10:08

結帳these tests from Quirksmode.org。你應該可以通過document.styleSheets訪問樣式表並解析它。

特別值得注意的是cssText測試。他們似乎抓住了特定選擇器的所有規則。

來源

2011-01-05 22:46:24 Stephen

這可以作爲一次性緩存的東西。您遍歷'document.styleSheets'中的所有選擇器，然後使用jQuery選擇與這些選擇器匹配的對象，並緩存每個元素的結果。雖然，我不確定你會如何處理衝突的選擇器，而一個壓倒一切。 – 2011-01-05 22:50:36

也許笏你可以做的是，保持一個單獨的JavaScript文件（anyname.js），也可以內嵌腳本也會做，並宣佈財產以後LIK這

$（文件）。就緒（函數（）{

$（ '＃'）。每個（函數（）{

$('# <div name>').css({ 'font-weight': 'bold' }); 

}

}

來源

2011-02-09 16:28:18 Sundhar

你會必須實現CSS引擎，這不是一件容易的事。

Firebug Lite的傢伙已經做到了。你可能想看看他們的getElementRules和getInheritedRules方法。

來源

2011-02-09 20:10:24 user123444555621

在運行時確定元素通過JavaScript實現了哪種樣式

回答

相關問題