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返回的新创建规则的索引。

<强>用法

为每个要更改的样式表创建CssManipulator的实例，如下所示：

pageSheet = new CssManipulator('title_of_the_stylesheet');

然后你可以通过调用object change方法来操纵样式表中的大多数规则（伪元素不能用这个代码操纵）：

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

如果传递的选择器存在于原始样式表中，则此方法会添加一个新的选择器。请注意，如果更改属性名称background-color，则需要传递＆＃34;连字符模式＆＃34;该方法的属性名称。

您可以进一步开发对象，例如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'获取所有元素并更改背景颜色。

如何从StyleSheet中按名称获取CSS类？

3 个答案: