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

Question

我创建了一个 on/off 按钮，我希望 html 的内容的 颜色反转开时正常，关时正常！而且我还希望图像和 gif 保持相同的颜色。我知道这很复杂 :x 但问题是因为按钮会在 div in html 内我不能使用+ space ~ 或 > 触发效果..请问有人知道怎么做吗？

这是目前的代码，但 html 部分是错误的..

function invertFunction(x) {
    x.classList.toggle("invertbutton");
}

.invertfunction{
  cursor:pointer;
    position:fixed;
    top:20px;
    left:20px;
    width:60px;
  height:30px;
}

#onbutton{
    width:60px;
    height:30px;
    background-color:#fff;
    border-radius:10px;
    border:1px solid #848484;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}

#movingbutton{
    width:30px;
    height:30px;
    border-radius:10px;
    border:1px solid #848484;
    background-color:#BDBDBD;
-webkit-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
}

.invertbutton #onbutton{
    background-color:#42B94E;
}

.invertbutton #movingbutton{
transform: translate(30px);
}

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

<html>

<div class="invertfunction"onclick="invertFunction(this)">
    <div id="onbutton">
    <div id="movingbutton"></div>
      </div>
</div>
</html>

感谢您的帮助！ :)

Answer 1

您可以在此处使用此代码：

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

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

div:not(#movingbutton) {
  filter: invert(0%);
}
.invertfunction {
  cursor: pointer;
  position: fixed;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 30px;
}
#onbutton {
  width: 60px;
  height: 30px;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #848484;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}
#movingbutton{
  width: 28px;
  height: 28px;
  border-radius: 20px;
  border: 1px solid #848484;
  background-color: #BDBDBD;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
}
.invertbutton #onbutton {
  background-color: #42B94E;
}
.invertbutton #movingbutton {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="invertfunction"onclick="invertFunction(this)">
  <div id="onbutton">
    <div id="movingbutton">
    </div>
  </div>
</div>
<br>
<br>
<br>
<div style="background-color: red;" height="100px" width="100px">Example div1</div>
<div style="background-color: green;" height="100px" width="100px">Example div2</div>
<div style="background-color: blue;" height="100px" width="100px">Example div3</div>
<div> 
  <img width="100px" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>

CodePen example

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

Invert colors of html when clicking (except imgs)

javascript

html

css

button

css-filters