Question

我目前正在编写一个小的Chrome扩展程序来修改现有网站。如果子项包含具有值的属性（例如红色，蓝色，......），我会尝试修改一个div元素。如果子项包含属性值为red的值，我希望父div以红色显示，依此类推。

我认为这个JS：

//find the parent div element
element = element.getElementsByClassName("existing-class-to-find-div")[0];
// check if the attribute from the child is blue
...
if (color == blue){
   element.className += " RedColorClass";
}

如果我用element.outerHTML或className打印出elmenent，一切都很好，我看到了新的值。但是在实际网站上仍然存在旧值，并且它没有改变。我是否必须触发某些内容来刷新html网站？

Answer 1

使用element.classList.add("RedColorClass")或者，如果使用jQuery：

 $(element).addClass("RedColorClass");

Answer 2

如果没有lib这样做，样式表对象可能是更好的修改目标。

我假设这是基于注释将类.existing-class-to-find-div的背景更改为红色。最好将该信息移到问题中。

样式表本身是一个不同的对象。

var CSSStyleSheet = document.styleSheets[0]; /*danger this is first style sheet not necessarily the correct sheet */
CSSStyleSheet.addRule(".existing-class-to-find-div", "background-color:red");

样式表的源代码不会更改，但devtools应该显示更改。

在粘贴的代码上，未定义颜色和蓝色。我怀疑这就是问题所在。

使用Javascript修改css类并不起作用

2 个答案: