可以檢測一個元素的樣式是否只是瀏覽器的默認值而不是由樣式表或內聯樣式設置？

Question

我的javascript包含在X的網站中，但我對她的網站或其中包含的內容沒有任何其他控制權。 如果她的樣式是#element ，我想不管它，但如果她沒有，我有一個樣式表，我會注入<head> 。 有沒有辦法檢測她是否有樣式？

檢查它的高度為0或1失敗，因為它有一些內容並且瀏覽器做出默認決定。

任何方式javascript / jquery /其他框架來告訴一個樣式的CSS特異性將回答這個並且令人難以置信。

Answer 1

知道是否存在對元素進行樣式化的直接但不完美的方法是檢查元素的style屬性是否具有值，或者是否已設置元素的class屬性。

http://jsfiddle.net/YbSpc/

HTML

<div id="test_unstyled"></div>
<div id="test_styled" style="background-color: red;" class="something"></div>

JS

var unstyled = document.getElementById('test_unstyled'),
    styled = document.getElementById('test_styled');

console.log('test_unstyled is styled?', !!(unstyled.getAttribute('style') || unstyled.className));
console.log('test_styled is styled?', !!(styled.getAttribute('style') || styled.className));

但是，此解決方案不會檢測通過CSS選擇器應用的任何樣式。 如果你想考慮這些，你可能必須找出瀏覽器應用的所有默認樣式並檢查，但這將很難維護，我不建議嘗試實施這種方法，除非你是願意為此唯一目的開發和維護圖書館。

如果您要發布其他人可能使用的插件，那么實現一個允許插件的客戶端確定他們是否希望應用插件樣式的API可能會更容易。

您還可以始終包含樣式表，用戶可以通過加載自定義樣式表來覆蓋樣式。

Answer 2

對於內聯樣式，它非常簡單：您只需訪問element.style對象並檢查您想要的屬性 - 或使用element.hasAttribute('style')來檢查屬性是否在HTML中定義。

對於樣式表應用的CSS規則，我建議你看一下“ 是否有可能檢查某些CSS屬性是否在使用Javascript的樣式標記內定義？ ”它與你提出的內容非常相似。

如果要過濾掉任何通用規則（如標記規則），使用其中描述的方法也很容易過濾掉只有#element選擇器的規則。

可以檢測一個元素的樣式是否只是瀏覽器的默認值而不是由樣式表或內聯樣式設置？

問題描述

2 個解決方案

解決方案1
0 2013-04-09 00:41:10

解決方案2
0 2013-04-09 01:29:35

可以檢測一個元素的樣式是否只是瀏覽器的默認值而不是由樣式表或內聯樣式設置？

問題描述

2 個解決方案

解決方案1 0 2013-04-09 00:41:10

解決方案2 0 2013-04-09 01:29:35

解決方案1
0 2013-04-09 00:41:10

解決方案2
0 2013-04-09 01:29:35