Question

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

上面是jsfiddle的链接，我想在我的网站上使用相同的按钮应该反转该功能，但它不是这样做的，我认为它有一些错误。

Answer 1

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

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

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

Answer 2

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

＆＃13;

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

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

反转完整的网页颜色并使用单个切换按钮将其反转

2 个答案: