将样式应用于新创建的元素的脚本

Question

我正在编写一个 tampermonkey 脚本来更改 class 以 "blocked" 开头的元素的样式。所以我有这个代码：

var blockedelements = document.querySelectorAll("[class^=blocked]");
var element = blockedelements[0];
element.style.display="none";

为简单起见，这仅适用于第一个元素，但我知道如何遍历每个元素以及此代码的工作原理。 webapp 使用此 class 动态创建新元素，我希望脚本为每个新创建的元素执行，这是我不知道该怎么做的。我想要一个纯 JS 解决方案，而不是 jquery。这是听众的目的吗？我对 javascript 了解不多。

如有指点，我将不胜感激

Answer 1

您可以使用 JavaScript 添加页面范围的样式规则以隐藏所有元素，而不是手动更改元素的每个实例的显示值。这样您就可以让浏览器为您处理将规则应用于元素的现有实例和未来实例。

大致思路：

var rule = "[class^=blocked] { display: none }";
var styleElement = document.createElement("style");

styleElement.type = "text/css";

if (styleElement.style.cssText) {
  styleElement.style.cssText = rule;
} else {
  styleElement.appendChild(document.createTextNode(rule));
}

document.getElementsByTagName("head")[0].appendChild(styleElement);

将样式应用于新创建的元素的脚本

script that applies a style to newly created elements

javascript

tampermonkey