我可以編程遍歷CSS樣式表嗎？

jQuery提供了一個很好的，整潔的方式來遍歷DOM ...我在尋找的是一種遍歷樣式表，獲取和設置定義樣式屬性的方法。我可以編程遍歷CSS樣式表嗎？

例樣式表

div { 
    background: #FF0000; 
    display: block; 
} 

.style { 
    color: #00AA00; 
    font-family: Verdana; 
} 

html body > nav.menu { 
    list-style: none; 
}

現在想象一下下面的代碼是像jQuery的CSS ...

獲取值從CSS

$("div").attr("background"); 
//returns #FF0000; 

$(".style").attr("color"); 
// returns #00AA00; 

$("html body > nav.menu").attr("color"); 
// returns undefined;

設定值CSS

$("div").attr("background", "#0000FF"); 

$(".style").attr("color", "#CDFF4E"); 

$("html body > nav.menu").attr("color", "#FFFFFF");

相當肯定這是不可能的......但只是在黑暗中的野生刺！

來源

2014-01-08 series0ne

使用jQuerry，您可以使用'.css'方法設置CSS屬性。請參閱[鏈接]（http://api.jquery.com/css/） – Daew

@Daew，我知道，但我不想在元素上設置CSS屬性。我想直接從樣式表中設置/獲取它們。 – series0ne

這裏有一個很好的教程：http://davidwalsh.name/add-rules-stylesheets –

我只是找到了一種方法，通過所有的樣式表來看待，使用jQuery開始：

我有三個樣式表我的網頁上，所以首先，我必須確定一個我需要處理，我給它一個id： <style id="localRules">...</style>

然後，我使用jQuery最初找到id'd樣式表我打算改變：

var sheetToChange = "localRules"; 
var sheets = $(document.styleSheets); 
// loop through all the stylesheets  
for (var thisSheet=0;thisSheet<sheets.length;thisSheet++){ 
    // find the right stylesheet to work on 
    if(sheets[thisSheet].ownerNode.id == sheetToChange){ 
      // cross browser referencing of css rules: 
      var ruleSet = sheets[thisSheet].cssRules || sheets[thisSheet].rules; 
      for (var thisRule=0;thisRule<ruleSet.length;thisRule++){ 
       // traverse in that style sheet for the rule you want to change, in this case, body: 
       if(ruleSet[thisRule].selectorText == "body"){ 
        ruleSet[thisRule].style.cursor = "pointer"; 
       } 
      } 
      break;    
    } 
}

希望這對我有用，但花了一段時間才弄明白，特別是因爲ownerNode是我以前從未聽說過的東西。

來源

2015-07-31 19:55:13 itsmikem

我認爲你可以，但界面比你想要的更加鈍。

document.styleSheets返回一個StyleSheetList似乎像數組一樣行爲的對象。

因此document.styleSheets[0]返回CSSStyleSheet對象。看看有很多方法來分析它的內容。並且每個CSSStyleSheet都有一個cssRules屬性，它返回CSSRuleList。

而且你可以遍歷對各類文檔從那裏自行返回由DOM API：https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

來源

2014-01-08 00:39:02

很酷。我不在乎它是多麼的愚蠢。如果它可以包裝成一個整潔的方式來操縱風格......我會建立它。 +1這個答案 – series0ne

我可以編程遍歷CSS樣式表嗎？

回答

相關問題