Question

说我插入这样的规则：

var style = document.createElement("style")
style.appendChild(document.createTextNode(""))
head.appendChild(style)

// done multiple times throughout the code
var index = style.sheet.insertRule(".myClass { color: red; }", style.sheet.cssRules.length)
var myRule = style.sheet.cssRules[index]

style.sheet.deleteRule函数需要一个索引，当我删除一个规则时，所有索引都会改变。因此，只需存储规则即可。索引，不够。

如何在不循环myRule的所有规则的情况下，在任何给定时间删除某个style.sheet.cssRules？

Answer 1

首先需要搜索规则的索引，所以这里是我创建的一个名为getStyleRuleIndexBySelector的函数，它可以查看某个样式表并返回匹配规则的索引。 / p>

＆＃13;

// 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;

// print rules
console.log("Stylesheet rules: ", Array.from(rules).map(item => item.cssText ) );

function getStyleRuleIndexBySelector(rules, 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( "Rules's indexes with selector '.second':", getStyleRuleIndexBySelector(rules, '.second' )  );
console.log( "Rule index by specific selector & props:", getStyleRuleIndexBySelector(rules, '.second', 'display:none; left:1px;')  );

// delete a certain rule (by specificly stating the Selector & its properties
style.sheet.deleteRule( getStyleRuleIndexBySelector(rules, '.second', 'display:none; left:1px;')[0] );

// print the rules
console.log("Stylesheet rules after removal: ", Array.from(rules).map(item => item.cssText ) );

＆＃13;

这与我对此问题的另一个答案有关： Get index of a CSS rule by name

我的另一个相关答案：Changing pseudo-element style from javascript

Answer 2

创建一个ruleIndexTracker 数组，它将作为一个键，将插入规则的原始索引转换为该规则的当前索引。

例如

var ruleIndexTracker = [

    0,
    1,
    2,
    3,
    4
];

每次向style.sheet添加新规则时，请向value添加ruleIndexTracker。

var nextIndex = (ruleIndexTracker[(ruleIndexTracker.length - 1)] + 1);
ruleIndexTracker.push(nextIndex);

因此，如果您添加第六和第七条规则，您将获得：

var ruleIndexTracker = [

    0,
    1,
    2,
    3,
    4,
    5,
    6
];

您可以看到，您将始终拥有一个数组，其条目数与您添加到style.sheet的规则完全相同（无论这些规则是否仍然存在或是否随后被删除）。< / p>

如果要删除规则，请运行以下功能：

function deleteRule(originalIndex) {

    ruleIndexTracker[originalIndex] = -1;

    for (let i = (originalIndex + 1); i < ruleIndexTracker.length; i++) {

        ruleIndexTracker[i] = (ruleIndexTracker[i] - 1);
    }
}

如果您现在希望删除添加的第四条规则（始终与ruleIndexTracker[3]相对应），则运行上述函数deleteRule(3)将导致以下结果：

var ruleIndexTracker = [

    0,
    1,
    2,
   -1,
    3,
    4,
    5
];

每当您需要从style.sheet删除规则时，您始终可以使用以下命令查找该规则：

ruleIndexTracker[originalIndex]

这将始终在style.sheet中显示该规则的当前索引。

删除按键插入.insertRule而不是索引的css规则

2 个答案: