如何使用切换更改正文背景颜色？
[英]How to change body background color with toggle?
问题描述
我正在尝试更改我网站的<body>中的几种背景颜色，但我想从仅更改 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>任何帮助将不胜感激，非常感谢！
5 个解决方案
解决方案1
0 2016-03-10 03:59:03
试试这个下面的例子
$(".my").click(function () { $(this).toggleClass("green"); });
.my { width: 50px; height: 50px; background-color: #336699; } .my:hover, .place.green { background-color: #00cc00; }
<div class="my"> </div>
解决方案2
0 2016-03-10 04:09:17
我刚刚做了一个更简单的函数（没有 jQuery），它在切换器上的“onchange”事件中切换背景颜色。 类/ID 名称也已更新（并删除了不必要的名称）。
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"; } }
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; }
<div class="switch"> <input id="switcher" class="switcher" type="checkbox" onchange="changeit()"> <label for="switcher"></label> </div>
解决方案3
0 2016-03-10 04:20:37
<============================HTML 代码==================== ================>
<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>
<============================CSS 代码==================== ================>
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;
}
<==========================Jquery代码==================== ================>
$("#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 的颜色，但您可以使用它来更改网站的背景颜色....
感谢和干杯
解决方案4
0 已采纳 2016-03-10 04:31:23
我认为您的代码中的主要问题在这里：
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
什么都不会触发javascript。
另一个问题正如 brod 所说，有多个 id 值。 我修改了这些，它的工作原理。
解决方案5
-1 2016-03-10 04:03:25
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();
});
});
如何更改路线改变角度4的车身背景或背景颜色？
[英]How to change the body background or background-color on route change angular 4?
通过在窗口就绪状态下使用javascript强制正文更改为背景，以防止页面闪烁主题切换时继承的正文bg颜色
[英]Prevent page from flickering inherited body bg color with theme toggle by forcing body to change to background using javascript on window ready
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.