javascript - 将非继承属性(例如文本颜色)级联到网页中的子元素，而不明确告诉子元素从父元素继承

Question

有没有一种方法可以将文本颜色等非继承属性级联到网页中的子元素，而无需明确告诉子元素从父节点继承

我正在尝试编写一个小应用程序来重新设计网页(例如google，msn.co.uk)。样式包括颜色、背景色，通过执行以下操作将样式注入(inject)正文

document.body.style.color='green';

但是，正文中包含自己样式的元素不会继承颜色，例如具有自己样式的 div 元素 <div id="testing" style="color": blue">仍然显示蓝色。

我目前的理解是，这是一个继承问题，并非所有属性都会自动从父容器继承，并且对于要继承的样式，必须通过执行以下操作来更改要继承的颜色

document.getElementById('testing').style.color='inherit';

在这种情况下，它将继承主体的颜色。但是在这种情况下，我必须遍历所有子元素，明确告诉它们从父元素继承(我实际上可以将这些子元素设置为与主体相同的颜色)

我猜这是一个继承问题，而不是特异性问题

Answer 1

我不知道是否有一种优雅而美好的方式来做你想做的事。但是:只是为了好玩，我尝试将 CSS 写入 <style>我通过 JS 添加的元素，因此我可以在声明中使用 CSS 选择器并使用 !important规则。它似乎可以工作(无论如何，在 Chrome 和 Safari 中)，但它有点老套(但更改网站的样式总是有点老套)

var overrides = document.createElement("style");
overrides.type = "text/css";
document.head.appendChild(overrides);

overrides.innerText = "body, body * { background: green !important }";

在开发者控制台中尝试一下，Stack Overflow 看起来就像圣帕特里克节!

同样，尚未在 Chrome 和 Safari 之外对其进行测试，但它可能会满足您的需求。