按名称获取CSS规则的索引

Question

我试图在样式表中找到css规则.widget-area的索引。

我正在这样做，但它返回undefined：

function findStyle(){
var myStylesheet=document.styleSheets[8].cssRules[".widget-area"];
console.log(myStylesheet);
};

如果我遗漏.cssRules[".widget-area"]，它会返回样式表的所有规则，但有数千个规则。

任何人都知道如何做到这一点？ 感谢。

Answer 1

我认为您使用.cssRules作为函数，但它是一个对象。因此，如果您想查找自定义规则，您应该使用以下内容：

var targetRule;
var rules = document.styleSheets[8].cssRules;

for (i=0; i<rules.length; i++){
  if (rules[i].selectorText.toLowerCase() == ".widget-area"){ 
    targetRule = rules[i];
    break;
  }
}

Answer 2

getStyleRuleIndexBySelector函数将查找特定规则的索引。请注意，这仅按选择器进行搜索，每个选择器可能有多个规则。

// create a dummy stylesheet which we'll search a key by value
var style = document.createElement("style")
style.appendChild(document.createTextNode(""))
document.head.appendChild(style);

// insert some rules
style.sheet.insertRule('.first{ color:red }', style.sheet.cssRules.length);
style.sheet.insertRule('.second{ color:green }', style.sheet.cssRules.length);
style.sheet.insertRule('div span a{ color:blue }', style.sheet.cssRules.length);
style.sheet.insertRule('.second{ display:none; left:1px; }', style.sheet.cssRules.length);

// get the rules
var rules = style.sheet.cssRules;

function getStyleRuleIndexBySelector(selector, prop){
  var result = [], i,
      value = (prop ? selector + "{" + prop + "}" : selector).replace(/\s/g, ''), // remove whitespaces
      s = prop ? "cssText" : "selectorText";
  
  for( i=0; i < rules.length; i++ )
    if( rules[i][s].replace(/\s/g, '') == value)
      result.push(i);
      
  return result;
}

console.log(  getStyleRuleIndexBySelector('.second' )  );
console.log(  getStyleRuleIndexBySelector('.second', 'display:none; left:1px;')  );