Question

我正在尝试更改我网站的<body>中的几种背景颜色，但我想首先更改正文background-color。我在切换时使用复选框/开关来操作背景颜色，但是当我点击它时它似乎不起作用。
虽然当我删除javascript脚本时，交换机可以正常工作。

这是我拥有的，请亲自检查一下：

    $(function() {
      $('#toggle-event').click(function() {
        $('body').toggleClass('nightmode');
    })
    });

.nightmode {
    background-color: red;
}
.slow{
	transition: left 0.7s;
    -webkit-transition: left 0.7s;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}



input.togglecss + label {
  padding: 2px;
  width: 85px;
  height: 25px;
  background-color: #dddddd;
  border-radius: 60px;
}
input.togglecss + label:before,
input.togglecss + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.togglecss + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}
input.togglecss + label:after {
  width: 25px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.togglecss:checked + label:before {
  background-color: #8ce196;
}
input.togglecss:checked + label:after {
  margin-left: 65px;
}

        <div class="switch">
          <input id="cmn-toggle toggle-event" class="cmn-toggle togglecss" type="checkbox" data-toggle="toggle" data-style="slow">
          <label for="cmn-toggle"></label>
        </div>

非常感谢任何帮助，非常感谢！

Answer 1

尝试以下示例

＆＃13;

$(".my").click(function () {
   $(this).toggleClass("green");
});

＆＃13;

.my { width: 50px; height: 50px; background-color: #336699; }
.my:hover, .place.green { background-color: #00cc00; }

＆＃13;

<div class="my">
</div>

＆＃13;

Answer 2

我刚刚制作了一个更简单的功能（没有jQuery），可以在＆＃39; onchange＆＃39;上切换背景颜色。切换器上的事件。类/ ID名称也已更新（并删除了不必要的名称）。

＆＃13;

function changeit() {

var shortget = document.getElementsByTagName("body")[0];
var aaa = shortget.style.backgroundColor;
    
if (aaa == "black") {
shortget.style.backgroundColor = "lavender";  
} else {
shortget.style.backgroundColor = "black"; 
}
    
}

＆＃13;

body {
  background-color:lavender;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.switcher {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.switcher + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.switcher + label {
  padding: 2px;
  width: 85px;
  height: 25px;
  background-color: transparent;
  border-radius: 60px;
}

input.switcher + label:before,
input.switcher + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

input.switcher + label:before {
  right: 1px;
  background-color: black;
  border-radius: 60px;
  transition: background 0.4s;
}

input.switcher + label:after {
  width: 25px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}

input.switcher:checked + label:before {
  background-color: lavender;
}

input.switcher:checked + label:after {
  margin-left: 65px;
}

＆＃13;

<div class="switch">
<input id="switcher" class="switcher" type="checkbox" onchange="changeit()">
<label for="switcher"></label>
</div>

＆＃13;

Answer 3

＆lt; =========================== HTML CODE ================ ===================＆GT;

<div id="div1">CSS Pseudo Classes (not cross browser) :hover :active</div>
<div id="div2">jQuery Click to CSS</div>
<div id="div3">jQuery Click to CSS</div>
<div id="div4">jQuery Click to Toggle</div>
<div id="div5">jQuery Mousedown/MouseUp</div>
<div id="div6">jQuery Toggle</div>

＆lt; =========================== CSS CODE ================ ===================＆GT;

div {
    background-color: green;
    border: 3px groove;
    cursor: pointer;
    margin: 1em;
    padding: 1em;
    text-align: center;
}
.back-green { background-color: green; }
.back-red { background-color: red; }
#div1:hover {
    background-color: yellow;
}
#div1:active {
    background-color: red;
}

＆lt; =========================== Jquery CODE ================ ===================＆GT;

$("#div2").on("click", function() {
    $(this).css("background-color", "red");
});

$("#div3").on("click", function() {
    $(this).css({ backgroundColor: "red" });
});

$("#div4").on("click", function() {
    $(this).toggleClass('back-red');
});

$("#div5").on("mousedown", function() {
    $(this).toggleClass('back-red');
})
.on("mouseup", function(e) {
    $(this).toggleClass('back-red');
});

$("#div6").toggle(function() {
    $(this).css("background-color", "red");
}, 
function() {
    $(this).css("background-color", "");
});

以下是它的工作小提琴：Fiddle :)

现在我在这里改变颜色多个div，但你可以用它来改变你网站的背景颜色....

谢谢＆amp;干杯

Answer 4

我认为代码中存在的主要问题是：

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

什么都不会触发javascript。

另一个问题是，brod说，有多个id值。我修改了它们，它确实有效。

Example

Answer 5

HTML

<select name="my-select" class="js-my-select">
  <option value="nothing" selected>Select Color</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

<div class="js-my-image red"></div>
<div class="js-my-image orange"></div>
<div class="js-my-image yellow"></div>
<div class="js-my-image blue"></div>
<div class="js-my-image green"></div>

CSS

div {
  display: none;
  height: 50px;
  width: 50px;
}
.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

JS

$(function() {
  var $select = $('.js-my-select'),
      $images =  $('.js-my-image');

  $select.on('change', function() {
    var value = '.' + $(this).val();
    $images.show().not(value).hide();
  });
});

如何用切换来改变身体背景颜色？

5 个答案: