javascript - 如何删除:hover css rule from stylesheet

Question

我正在开发一个基于 jQuery 和 javascript 的元素。我正在尝试使用 javascript insert/addRule 属性添加 CSS 规则。我想做的是:

我必须创建悬停效果并使用 javascript css 属性将它们插入到样式表中。为此，我创建了两个类:

.dummy {.... }

和

.dummy:hover{.....}

我希望如果我更改悬停效果，则它必须从样式表中删除前一个(或重复项)并将新规则插入到样式表中。

但问题是，如果我尝试使用deleteRule或removeRule删除或删除CSS规则，它只会删除

.dummy{...} 规则，但不是 .dummy:hover{...}

这是我的代码，可以帮助您了解我在做什么:

function createNewStyle() {
    var style = document.createElement("style");
    style.setAttribute('id', 'd-set-stylesheet');
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
} // this function might be not required but included here so that you may understand the program flow.

//the main issue is with this function.
function removeIfExists(class_name) {
    var styleTag = document.getElementById("d-set-stylesheet");
    var styleRef = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
    if (styleRef.rules) { //all browsers except IE 9-
        console.log(styleRef);
        for (var i in styleRef.cssRules) {
            if (styleRef.cssRules[i].selectorText === "." + class_name+":hover" ||styleRef.cssRules[i].selectorText === "." + class_name )
                styleRef.deleteRule(i);
        }
    } else {
        var i;
        for (i = 0; i < styleRef.rules.length; i++) {
            //if(styleRef.rules[i].selectorText === "."+class_name || styleRef.rules[i].selectorText === "."+class_name+":hover")
            styleRef.removeRule(i);
        }
    }
    return styleRef;
}

 //this function maybe not related with the issue but if it is you can check it.
function setNewClass(element, class_name, classSelector, styleObject) {
    var stylesheet = removeIfExists(class_name);
    if (element.data('hover-class') == null)
        element.data('hover-class', class_name);
    let count = 0;
    var style = [];
    var property = [{
        "append": ":hover"
    }, {
        "append": ""
    }];
    for (j = 0; j < 2; j++) {
        style.push({});
        style[j].sheet = stylesheet;
        style[j].selector = class_name;
        style[j].type = classSelector;
        style[j].property = property[j]["append"];
        style[j].style = "";
    }
    for (i in styleObject) {
        if (styleObject.hasOwnProperty(i))
            if (count % 2 == 0)
                style[0].style += styleObject[i] + ":";
            else
                style[0].style += styleObject[i] + ";";
        count++;
    }
    style[1].style = "transition:" + styleObject.t_property_value;
    addCSSRule(style);
}

function addCSSRule(styleSheet) {
    console.log(styleSheet);
    for (i = 0; i < styleSheet.length; i++)
        if (styleSheet[i].sheet.insertRule)
            styleSheet[i].sheet.insertRule(styleSheet[i].type + styleSheet[i].selector + styleSheet[i].property + "{" + styleSheet[i].style + "}", styleSheet[i].sheet.cssRules.length);
        else
            styleSheet[i].sheet.addRule(styleSheet[i].type + styleSheet[i].selector + styleSheet[i].property, styleSheet[i].sheet.style, -1);
}

这是console.log的图像在第一张图片中，将悬停类和没有悬停类的悬停类添加到 CSS 规则中。

在第二张图片中，之前的悬停类不会被删除，而没有悬停类的则会被删除。我想要悬停过渡必须删除。在添加新规则以防止类重复以及悬停元素时的多个转换之前，应防止出现这种情况。

谢谢。

Answer 1

我今天找到了答案。我会解释一下，以便以后可以帮助其他人理解问题和解决方案。

通过我的提问，你就可以明白这个问题了。问题仅出在这个函数上

function removeIfExists(class_name) {
 ......
if (styleRef.rules) { //all browsers except IE 9-
    for (var i in styleRef.cssRules) {
           .....
            styleRef.deleteRule(i); //problem is with this.
           .....
    }
   }
  .......
   return styleRef;
}

当我根据一些测试检查deleteRule时，我发现当调用deleteRule时会发生以下情况:

1. 根据索引删除css规则。
2. (最重要的是，因为没有相关的文档、澄清或解释)内容会通过索引进行更新。这样我的函数将不再能够在旧索引的基础上删除正确的规则。

为了更好地理解它，我给你举个例子:

假设我在css中添加了两条规则，例如:.dummy:hover{...}和.dummy{...}

现在这些规则的索引如下:

[0]: .dummy:hover rule
[1]: .dummy rule

当我调用删除规则时发生的事情是:

// at i =0; 
deleteRule(0);/* will be called and it will remove [0]: .dummy:hover rule
 and then it will update the rules indexing again, which means
 [1]: .dummy rule => [0]: .dummy rule */
// now when i = 1;
deleteRule(1); /* will be called and it will try to remove [1]: .dummy rule which is not here anymore and it will just skip the removal of [1]: .dummy rule.

所以我要做的删除它是开始从最高索引或以相反的顺序删除规则，这意味着 i = 1 规则将首先被删除，然后 i=0;以免产生任何后果。

函数将更改为:

function removeIfExists(class_name)
{
    ...
    var styleRef = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
    var len = styleRef.cssRules ? styleRef.cssRules.length : styleRef.rules.length;
    if(styleRef.rules){ //all browsers except IE 9-
        for(i=len;i>0;i--)
        {
                if (styleRef.cssRules[i-1].selectorText === "." + class_name+":hover" ||styleRef.cssRules[i-1].selectorText === "." + class_name )
                styleRef.deleteRule(i-1);
        }
    }
    ......
    .....
    }
    return styleRef;    
}

注意:对于 IE，将遵循类似的过程，但我没有将其包含在此处。