如何從StyleSheet按名稱獲取CSS類？

Question

我有以下代碼，該代碼使用索引獲取樣式表以及該樣式表內的CSS類。

 for (var s = document.styleSheets.length - 1; s >= 0; s--) {
            if (document.styleSheets[s].href && (document.styleSheets[s].href.indexOf("MySheet.css")!=-1)) {
                     var cssRules = document.styleSheets[s].cssRules ||
                             document.styleSheets[s].rules || []; // IE support
                     for (var c = 0; c < cssRules.length; c++) {
                         if (cssRules[c].selectorText === ".myclass ")
                             cssRules[c].style.backgroundColor = 'powderblue';
                     }
             }
       }

雖然我在上面的代碼中按名稱獲得了CSS類，但我還是需要避免這種循環。是否有可能通過查詢獲取CSS類？如何做到這一點？其他避免這種循環的方法？

Answer 1

這是一個片段，您可以用來創建新規則和操作樣式表中的現有規則。 特定的工作表可以通過其title識別，因此您需要為要處理的樣式表賦予唯一的標題（將title屬性添加到相應的link或style標簽）。

function CssManipulator (sheetTitle) {
    var that = this,                        // A reference to an instance
        len = document.styleSheets.length,  // Caches the length of the collection
        n;                                  // General loop counter
    this.styleSheet = null;                 // Stores the stylesheet for the instance
    this.selectors = {};                    // Stores the selectors we've handled
    this.cssRules = null;                   // Caches cssRules of the given stylesheet
    // Search the given stylesheet by title and assign it and its cssRules to instance properties
    for (n = 0; n < len; n++) { 
        if (document.styleSheets[n].title === sheetTitle) {
            this.styleSheet = document.styleSheets[n];
            this.cssRules = document.styleSheets[n].cssRules || document.styleSheets[n].rules;
            break;
        }
    }
    // Changes properties of the given selector
    this.change = function (selector, prop, value) {
        // FF knows only camel-cased propertynames, hence camel-casing the propName
        var propName = (prop.charAt(0) === '-') ? prop.substring(1, prop.length) : prop;        
        propName = propName.replace(/-([a-z])/gi, function(str, chr) {
            return chr.toUpperCase();
        }); 
        if (selector in that.selectors) { // Change the rule, if we've handled this selector before
            that.styleSheet.cssRules[that.selectors[selector]].style[propName] = value;
        } else { // Add a new rule if we haven't met this selector before
            that.selectors[selector] = that.styleSheet.insertRule(selector + '{' + prop + ':' + value + ';}', that.cssRules.length);
        }
    };
}

selectors包含魔術，它存儲insertRule返回的新創建規則的insertRule 。

用法

為要更改的每個樣式表創建一個CssManipulator實例，如下所示：

pageSheet = new CssManipulator('title_of_the_stylesheet');

然后，您可以通過調用對象的change方法來處理樣式表中的大多數規則（偽代碼無法使用此代碼進行處理）：

pageSheet.change('.some_selector', 'property-name', 'value_for_the_property');

即使所傳遞的選擇器是否存在於原始樣式表中，此方法也會一次添加一個新的選擇器。 請注意，如果您更改屬性名稱（例如background-color ，則需要將屬性名稱的“連字符模式”傳遞給方法。

您可以進一步開發對象，例如， change方法可以輕松更改為每個調用接受多個屬性-值對。

Answer 2

如果我理解正確，則想更改CSS。 正是您想更改類的CSS規則。 為此，為了使性能最有效，我將使用選擇器創建一個樣式表，例如，可能只是.selector>div{}或只是.selector{} 。

<style type="text/css">.squerify>tr{height:60px;}</style>

我前一段時間使用它來使表格單元格方形（而我的單元格都相等）。

然后，我使用此代碼來更改樣式表中類的參數。

document.styleSheets[0].cssRules[numberOfSelector].style.height=document.querySelector('.squerify td').offsetWidht+"px";

這是我能想到的最好方法，但是如果需要，可以使用循環來搜索類。
如果誤解了您的問題，請發送評論。

Answer 3

var someVar = document.querySelectorAll('.someClass');
for(var i=0; i<someVar.length; i++){
someVar[i].style.background = 'powderBlue';}

這將使用“ someClass”類獲取所有元素，並更改背景顏色。