反转完整的网页颜色并使用单个切换按钮反转它们答案

【问题标题】：Invert complete webpage colors and reverse them with single toggle button反转完整的网页颜色并使用单个切换按钮反转它们
【发布时间】：2021-08-17 13:47:37
【问题描述】：

我需要帮助来制作这个 JSFiddle 来反转颜色反转我尝试了很多方法和技巧，但每次都以某种方式失败。

JSFIDDLE LINK

上面是我想在我的网站上使用的 jsfiddle 的链接，同一个按钮应该反转功能，但它没有这样做，所以我认为它存在某种错误。

【问题讨论】：

您的 jsFiddle 未正确链接。请提供正确的链接并公开。
请将外部托管代码编辑到帖子中；这样做将确保即使链接断开，它仍然有用。我的脚本 is not allowed to do this 因为潜在的许可问题。

标签： javascript jquery ajax html css

【解决方案1】：

指定html 和body 高度和white 背景而不是透明：

$("button").click(function () {
  $("html").toggleClass("inversed");
});

html, body {
  background: white;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 1em;
}

.inversed {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Inverse</button>

【讨论】：

我爱你！！！它起作用了，它是有史以来最简单的形式，非常感谢你：D

【解决方案2】：

不要将样式添加到标题中，而是将其直接应用于<html> 元素。然后，您可以通过在 negativar 函数中添加类似这样的内容来轻松地再次删除它：

var html = document.getElementsByTagName('html');

if (html.getAttribute('style')) {
    html.setAttribute('style', '');
} else {
    html.setAttribute('style', 'YOUR STYLE HERE')
}

【讨论】：