是否可以通過JavaScript從HTML節點中找到CSS規則？

我想在DOM中獲取一個元素，然後查找我的CSS文件中的哪些規則正在促成它的外觀。類似於螢火蟲或webkit檢查員所做的。有沒有辦法在JavaScript中做到這一點？是否可以通過JavaScript從HTML節點中找到CSS規則？

更新：

我應該提供一個約束，一個具體的例子 - 我只是在基於WebKit瀏覽器實現這一興趣使跨瀏覽器的困難是沒有這麼多的問題。我特別想要實現的是這個。比方說，我有一個樣式表如下：

 div { 
     background: #f0f0f0; 
    } 

    .example { 
     padding: 10px; 
    }

然後讓我們說一些HTML代碼：

<div id="test" class="example"> 
    <hgroup> 
     <h1>Test</h1> 
     <h2>A sample file to play with.</h2> 
    </hgroup> 
    <ul class="sample"> 
     <li id="item_1">Item 1</li> 
     <li id="item_2">Item 2</li> 
    </ul> 
    </div>

所以後來在JavaScript中我希望能夠有一種能夠找到一個函數從那個CSS選擇器樣式對象：

get_selectors_for(document.getElementById('test')) 
// should return: 
// ['div','.example']

如何複雜的是它反向查詢，選擇知道我們只需要擔心WebKit的，而不是所有的瀏覽器？

來源

2010-12-19 Jim Jeffers

我應該提到我只對在webkit中這樣做感興趣。沒有這麼多的瀏覽器。 – 2010-12-19 12:19:57

[查找適用於元素的所有CSS規則]的可能重複（http://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element） – Bergi 2013-09-24 13:31:22

ŧ他是你想要的。僅限WebKit。我通過查看鉻檢測器源，瞭解了getMatchedCSSRules。

function getAppliedSelectors(node) { 
    var selectors = []; 
    var rules = node.ownerDocument.defaultView.getMatchedCSSRules(node, ''); 

    var i = rules.length; 
    while (i--) { 
     selectors.push(rules[i].selectorText); 
    } 
    return selectors; 
    }

來源

2010-12-19 13:18:09 Hemlock

太棒了！這正是我所期待的。 – 2010-12-19 14:09:20

請注意，這僅適用於從HTML服務器發送的樣式表中的規則。這是設計 – Jake 2012-05-02 03:18:37

@Jake這就是爲什麼我'null' – jscripter 2014-03-22 08:37:27

可能嗎？絕對......是簡單（特別是與IE瀏覽器混合使用的跨瀏覽器），不是那麼多。如果你真的對此感興趣，check out the Firebug Lite CSS source here。至少這些方法會得到體面的評論，顯示每個提取的信息。

....或者如果您只想在沒有檢查員的瀏覽器中檢查just use Firebug Lite。

來源

2010-12-19 10:01:57

感謝Nick，我真的只對在webkit中這樣做感興趣。我應該更具體一些，但現在我很高興讓它有點寬廣了！ – 2010-12-19 12:20:38

沒有得到它的可靠方法，在提到這個blog post：

function getStyle(oElm, strCssRule){ 
    var strValue = ""; 
    if(document.defaultView && document.defaultView.getComputedStyle){ 
     strValue = document.defaultView 
      .getComputedStyle(oElm, "").getPropertyValue(strCssRule); 
    } 
    else if(oElm.currentStyle){ 
     strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ 
      return p1.toUpperCase(); 
     }); 
     strValue = oElm.currentStyle[strCssRule]; 
    } 
    return strValue; 
}

如果您正在使用Firefox和Firebug的，你可以嘗試運行在StackOverflow的這段代碼，看看你會得到什麼：

document.defaultView.getComputedStyle(document.getElementById("custom-header"),"")

並與IE和Firebug的精簡版，你可以這樣做：

document.getElementById("custom-header").currentStyle

來源

2010-12-19 10:03:35

謝謝，但我認爲這從CSS查找計算的樣式。所以這段代碼會幫我找出font-size是10px ;.我不認爲這一定是爲了找到CSS中的特定選擇器嗎？ – 2010-12-19 12:32:59

此代碼可以幫助您找到應用於元素的css規則。它們起源的地方並不重要，但是它們被應用。 – 2010-12-19 14:36:14

請在您投票時加入評論！ – 2012-10-04 06:58:54

那麼，這是一個古老的主題。適合Webkit提供解決方案。正如所建議的，我已經研究過螢火蟲，並...驚喜！對於每個節點，它循環遍歷每個樣式表中的每個規則，檢查選擇器是否匹配我們的節點。

來源

2011-01-15 17:29:30 vitko

一個跨瀏覽器的解決方案，我有很好的成功與是http://www.brothercake.com/site/resources/scripts/cssutilities/

這是非常強大的，準確的，導出除上述僅WebKit的功能更多的信息，它適用於所有樣式（包括那些跨站點並且不活躍或已被覆蓋的項目）。

來源

2012-09-07 13:21:45 GunnerGuyven

是否可以通過JavaScript從HTML節點中找到CSS規則？

回答

相關問題