gpt4 book ai didi

javascript - 覆盖 CSS 过滤器反转在 Mozilla Firefox 中不起作用

转载 作者:行者123 更新时间:2023-11-30 15:48:57 27 4
gpt4 key购买 nike

我正在编写小型 firefox 插件,以便在晚上舒适地阅读页面。它应该反转页面颜色但不反转图像。代码是:

document.body.style.filter = "invert(100%)";

var imgs = document.getElementsByTagName("img");

for (var i = 0; i < imgs.length; i++) {
imgs[i].style.removeProperty("filter"); // NOT WORKING
imgs[i].style.filter = "invert(0%)"; // NOT WORKING EITHER
}

问题是它没有按预期工作 - 图像仍然是倒置的,though inspect 元素在 firefox 中显示它们具有适当的 invert(0%) 样式。

最佳答案

如果您反转正文,则意味着所有 它的内容都被反转了。要以原始颜色显示图像,您需要再次反转,即应用 invert(100%)给他们。

请注意,这与 CSS 继承不同,过滤器在概念上适用于将框的像素合成到其父级上时,图像在 <body> 内框,这就是为什么它们也会倒置。

小旁注:您可能希望将其应用于 document.documentElement:root选择器——在大多数情况下是 <html>节点——因为主体可以小于视口(viewport)。另一件需要考虑的事情是嵌套在倒置文档中的框架。

关于javascript - 覆盖 CSS 过滤器反转在 Mozilla Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39664797/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com