javascript - 忽略/覆盖周围/继承的 CSS

Question

我有这个调用来将 HTML/CSS 添加到现有页面:

let div = document.createElement('div');
div.style.zIndex = 9999999;
div.innerHTML = str;  // some pre-defined HTML string
document.body.insertBefore(div, document.body.firstChild);

我正在创建一个可以帮助开发人员的 Chrome 扩展程序。发生的事情是上面的 HTML 从开发者页面继承了现有的 CSS。我希望上述 HTML 的样式独立于开发人员页面上的 CSS/样式。

有没有办法忽略页面上所有现有的 CSS？我想基本上创建一个“CSS 沙箱”。

我认为创建这样一个沙箱的一种方法是 iframe，但我正在寻找一种更简单的方法来做到这一点。

Answer 1

将 class 添加到要重置的元素..然后将 all:unset 应用于该类

The all CSS shorthand property sets all of an element's properties (apart from unicode-bidi and direction) to their initial or inherited values, or to the values specified in another style sheet origin.

---

...全部:未设置

指定如果默认继承，则所有元素的属性应更改为其继承值，否则更改为初始值。(它也会忽略所有用户代理样式.)

堆栈片段

let p = document.createElement('p');
p.style.color = "red";
p.innerHTML = "Hello"; // some pre-defined HTML string
p.classList.add("reset");
document.body.insertBefore(p, document.body.firstChild);

p {
  background: black;
}

.reset {
  all: unset;
}