javascript - 反转页面颜色

Question

我正在制作一个脚本来反转 HTML 页面的颜色。所以晚上更容易看。我正在使用 filter: invert(100%) 来做到这一点。

这是脚本:

document.body.style.filer = "invert(100%)";
Object.values(document.body.getElementsByTagName("*")).forEach(e => {
    e.style.filter = "invert(100%)"
});

然而它并没有真正起作用。

标题上的 Stack Overflow Logo 和按钮都消失了。我做错了什么，还有比这更好的方法吗？

提前致谢。

Answer 1

您的解决方案:

document.body.style.filer = "invert(100%)";
Object.values(document.body.getElementsByTagName("*")).forEach(e => {
    e.style.filter = "invert(100%)"
});

并没有真正起作用，因为您正在反转父元素和它们的子元素的颜色。反转两次会使元素具有原始颜色。因此，您只需要反转父项的颜色(在本例中为 html，它是一切的根源):

document.querySelector('html').style.filter = 'invert(100%)'

并且每种颜色都会反转。请注意，如果您尝试在无色元素上使用它，则不会发生任何变化，即如果您在此页面 上尝试此脚本，您会注意到左侧的 div此页面带有 id left-sidebar 的一侧不会改变颜色。这是因为侧边栏没有任何颜色(中间部分和右侧边栏是倒置的，因为它们位于具有白色背景颜色的 div#content 内)。

但是，如果您向左侧栏添加背景(例如白色)，它也会反转其颜色。