Javascript 按键而非索引删除与.insertRule一起插入的css规则

假设我插入如下规则：

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

的所有规则？

首先需要搜索规则的索引，因此我创建了一个函数，名为

getStyleRuleIndexBySelector

，可以查看特定样式表并返回匹配规则的索引

//创建一个伪样式表，我们将按值搜索一个键
var style=document.createElement（“样式”）
style.appendChild（document.createTextNode（“”）
document.head.appendChild（样式）；
//插入一些规则
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）；
//遵守规则
var规则=style.sheet.cssRules；
//打印规则
log（“样式表规则：”，Array.from（rules）.map（item=>item.cssText））；
函数getStyleRuleIndexBySelector（规则、选择器、属性）{
var结果=[]，i，
值=（prop？selector+“{”+prop+“}”：选择器）。替换（//\s/g'，），//删除空格
s=道具？“cssText”：“选择文本”；
对于（i=0；iconsole.log（“删除后的样式表规则：”，Array.from（rules）.map（item=>item.cssText））；

创建一个

ruleIndexTracker

数组，该数组将用作键，将插入规则的原始索引转换为该规则的当前索引

例如

每次将新规则添加到

样式表

时，请将

值

添加到

规则索引追踪程序

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

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

var ruleIndexTracker = [

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

您可以看到，您将始终拥有一个数组，其中的条目数与您添加到

样式表中的规则数完全相同（无论这些规则是否仍然存在或是否随后被删除）

如果要删除规则，请运行以下函数：

function deleteRule(originalIndex) {

    ruleIndexTracker[originalIndex] = -1;

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

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

每次需要从
样式表
中删除规则时，您都可以使用以下方法找到该规则：

var ruleIndexTracker = [

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

ruleIndexTracker[originalIndex]

这将始终在
style.sheet
中显示该规则的当前索引。为什么要插入和删除规则？因为我想动态插入标记，而标记又应该具有动态样式。因此，在我从DOM中删除标记后，我也想删除其样式-
ruleIndexTracker[originalIndex]