如何反转页面上除图像以外的所有内容

Question

我正在考虑一种更简单的方法来更改页面上的 colors，而无需为暗模式编写额外的 CSS。 搜索后，我发现 jQuery 在某种程度上非常有用，但也会反转页面上的图像。 就我而言，最好不要倒置图像而只倒置文本。 我如何实现这一目标？ 我努力了

 $("#ibutton").click(function() { $("body:not(img)").css("filter", "invert(2)") }) $("#ibutton2").click(function() { $("body").css("filter", "invert(0)") })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="128px"> <br><font color="red">I am Logo</font> <br> <input id="ibutton" value="invert" type="button"/> <input id="ibutton2" value="revert" type="button"/>

Answer 1

你的代码是错误的，因为你正在选择身体。 你必须 select 除了图像之外的身体中的所有元素你可以像下面那样做

 $("#ibutton").click(function() { $("body").find("*:not(img)").css("filter", "invert(2)") }) $("#ibutton2").click(function() { $("body").find("*").css("filter", "invert(0)") })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="128px"> <br><font color="red">I am Logo</font> <br> <input id="ibutton" value="invert" type="button"/> <input id="ibutton2" value="revert" type="button"/>

还有另一种反转颜色的方法，不向所有元素添加内联样式，只向主体添加一个 class 并设置 class 的样式，如下所示

 $("#ibutton").click(function() { $("body").addClass('invert') }) $("#ibutton2").click(function() { $("body").removeClass('invert') })

 body.invert *:not(img) { filter: invert(2) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="128px"> <br><font color="red">I am Logo</font> <br> <input id="ibutton" value="invert" type="button"/> <input id="ibutton2" value="revert" type="button"/>

Answer 2

试试这个。

$("#ibutton").click(function() { $("body *").not("img") .css("filter", "invert(2)") }) $("#ibutton2" ).click(function() { $("body *") .css("filter", "invert(0)") })

 $("#ibutton").click(function() { $("body *").not("img").css("filter", "invert(2)") }) $("#ibutton2").click(function() { $("body *").css("filter", "invert(0)") })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="128px"> <br><font color="red">I am Logo</font> <br> <input id="ibutton" value="invert" type="button"/> <input id="ibutton2" value="revert" type="button"/>