Javascript 单击时反转html的颜色（imgs除外）

我已经创建了一个开/关按钮，我希望html内容的颜色在打开时反转，在关闭时正常！我也希望图像和GIF保持相同的颜色。。我知道这很复杂：x但问题是，由于按钮将位于html中的div中，我无法使用

+

空格
~
或
来触发效果。。有人知道怎么做吗

下面是目前的代码，但html部分的代码是错误的


函数反转函数（x）{
x、 切换（“反转按钮”）；
}
.inverte函数{
光标：指针；
位置：固定；
顶部：20px；
左：20px；
宽度：60px；
高度：30px；
}
#ON按钮{
宽度：60px；
高度：30px；
背景色：#fff；
边界半径：10px；
边框：1px实心#8484；
-webkit转换：.3s轻松；
-moz转换：.3s容易；
-o-转变：.3s；
过渡：放松；
}
#移动按钮{
宽度：30px；
高度：30px；
边界半径：10px；
边框：1px实心#8484；
背景色：#bdbd；
-webkit转换：.2s轻松；
-moz转换：.2s容易；
-o-转变：.2s；
过渡：放松；
}
.反转按钮#打开按钮{
背景色：#42B94E；
}
.反转按钮#移动按钮{
转换：转换（30px）；
}
.invertbutton.html{
-webkit过滤器：倒置（100%）；
过滤器：倒置（100%）；
}
您可以在此处使用此代码：

function invertFunction(x) {
  x.classList.toggle("invertbutton");
  if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
    $("div:not(#movingbutton)").css('filter', 'invert(100%)');
    $("img").css('filter', 'invert(100%)');
  } else {
    $("div:not(#movingbutton)").css('filter', 'invert(0%)');
    $("img").css('filter', 'invert(0%)');
  }
}

您可以删除此css：

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


函数反转函数（x）{
x、 切换（“反转按钮”）；
if（$（“div:not（#movingbutton）”）.css（'filter'）=='invert（0%）'））{
$（“div:not（#movingbutton）”）.css（'filter'，'invert（100%））；
$（“img”）.css（'filter'，'invert（100%））；
}否则{
$（“div:not（#movingbutton）”）.css（'filter'，'invert（0%））；
$（“img”）.css（'filter'，'invert（0%））；
}
}
div:not（#移动按钮）{
过滤器：倒置（0%）；
}
.反转函数{
光标：指针；
位置：固定；
顶部：20px；
左：20px；
宽度：60px；
高度：30px；
}
#ON按钮{
宽度：60px；
高度：30px；
背景色：#fff；
边界半径：20px；
边框：1px实心#8484；
-webkit转换：.3s轻松；
-moz转换：.3s容易；
-o-转变：.3s；
过渡：放松；
}
#移动按钮{
宽度：28px；
高度：28px；
边界半径：20px；
边框：1px实心#8484；
背景色：#bdbd；
-webkit转换：.2s轻松；
-moz转换：.2s容易；
-o-转变：.2s；
过渡：放松；
}
.反转按钮#打开按钮{
背景色：#42B94E；
}
.反转按钮#移动按钮{
-webkit转换：translateX（30px）；
-ms变换：translateX（30px）；
转换：translateX（30px）；
}







示例1
示例二
示例第3部分
“但问题是，由于按钮将位于html中的div中，因此我无法使用+space~或>来触发效果”-抱歉，我不明白。你是在问当你按下键盘上的某些键时如何触发更改吗？不，但我的意思是当另一个div被触发时，我不能影响整个html，你明白我的意思吗？使用这些组合符：@MichaelCokerI认为您误解了答案。您可以在CSS中使用not。*：not（img）{……}听起来像是你想使用
document.body.classList.toggle（'invertbutton'）
，然后你可以引用父类来影响页面上的任何元素，因为它适用于
body
你太棒了！！我不知道为什么虽然你在片段中创建的内容正是我想要的，但它在我的网站上不起作用：/我可以给你地址，这样你就可以告诉我出了什么问题，还是太烦人了（我完全明白）@MaëlleJumel没关系，不会烦人。我想看看它有什么问题。@MaëlleJumel地址是什么？@MaëlleJumel您需要在页面底部，关闭标记的正上方包含JQuery。@MaëlleJumel如下：