Question

简短问题全部在标题中...... TL; DR在下面。

This question并且评论讨论了在包含单个规则的样式表上使用id作为一种巧妙的技术，用于隔离必须显着改变的样式，并且用于更改选择器和样式内容。

对我来说似乎更频繁的情况就是改变内容，这可以通过引用cssRule.style.properties来完成......如果可以找到正确的cssRule。

但个别风格规则似乎没有提供id，或者在样式表（或样式表集合）中的（有时）数百种样式规则中找到它们。

this link讨论如何通过选择器文本查找规则，但似乎必须完全匹配选择器文本，并且实现只找到具有该选择器文本的第一个规则，尽管可能有更多不止一个。如果希望改变可见的风格，最后一个可能更有用。显然，代码可以被调整以返回最后一个，或者返回一个数组......但有时选择器文本也会变得非常长。

有一种标记想要动态更改的特定规则的方法似乎很有用。如果操作样式表，保持数组索引将是一种脆弱的，易受bug影响的方法。

Answer 1

没有getElementById只适用于js，在你通过插值帮助调用id的样式表中意味着你有一个id为myContainer的div，在你的样式表中你只需要声明#myContainer来给它相应的样式

Answer 2

如果我理解正确，那么我对该评论的假设是正确的。

如果您想轻松找到规则，标记 / 组您将有不同的可能性。

您不能使用#id并且可以为规则添加多个选择器来引入某些结构。

规则在.cssRule中的显示顺序必须是它们在文档中的显示顺序。在此，您可以使用#begin#id {}和#end#id {}标记一系列规则，或通过向其选择器添加#tag#id来标记单个规则。

你是可以做这样的事情（但是奖励我只测试了当前FF和Chrome的想法，不知道IE将如何表现）

var styles = document.styleSheets;
  
function findRulesInBlock(styleSheet, id) {
    var inBlock = false;
    var result = [];
    for (var i = 0; i < styleSheet.cssRules.length; i++) {
        if (styleSheet.cssRules[i].selectorText == '#begin#' + id) {
            inBlock = true;
        } else if (styleSheet.cssRules[i].selectorText == '#end#' + id) {
            inBlock = false;
        } else if (inBlock) {
            result.push(styleSheet.cssRules[i]);
        } else if(styleSheet.cssRules[i].selectorText.match('#tag#'+id)) {
            result.push(styleSheet.cssRules[i]);
        }
    }
    return result;
}


for (var i = 0; i < styles.length; i++) {
    var result = findRulesInBlock(styles[i], 'id123');
    for( var j=0 ; j<result.length; j++ ) {
    
        console.log(result[j].selectorText);
    }
}

 rule1 {
    color: black;
}

/* the start of a block of rules*/
#begin#id123 {}

   .rule2 {
       color: black;
   }
   .rule3 {
       color: black;
   }

#end#id123 {}
/* the end of a block of rules*/

.rule4 {
    color: black;
}

#tag#id123, .rule5 {
    color: black;
}

#tag#id123, .rule6 {
    color: black;
}

样式规则是否有getElementById？

2 个答案: