Question

我有一个输入复选框。我想更改HTML的所有正文CSS（未选中时为白色背景和黑色文本，而选中时为黑色背景和白色文本。

HTML：

  <input id="nightmode" type="checkbox">Activate night mode

Answer 1

您可以尝试这样的事情：

document.querySelector('#chk').onchange = function (e) {
    var check = e.target.checked;
    var backColor = check ? "black" : "white";
    var color = check ? "white" : "black";
    document.querySelector('body').style.background= backColor ;
    document.querySelector('body').style.color= color ;
};

希望这会有所帮助

Answer 2

您可以尝试检查复选框中的更改，然后相应地设置背景颜色和文本颜色。

document.getElementById("nightmode").addEventListener("change", function() {
  if (document.getElementById("nightmode").checked == true) {
    document.documentElement.setAttribute("style", "background-color: black;");
    document.getElementsByTagName("body")[0].setAttribute("style", "color: white;");

  } else {
    document.documentElement.setAttribute("style", "background-color: white;");
    document.getElementsByTagName("body")[0].setAttribute("style", "color: black;");
  }
});

<input id="nightmode" type="checkbox">Activate night mode
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Answer 3

为了清楚起见，请使用jQuery复选框

<input id="nightmode" type='checkbox'> Activate night mode

根据您的要求触发以下更改：

$("#nightmode").change(function() {
    if ($(this).is(":checked"))
        $('body').css("background-color", "black").css("color","white"); 
    else
        $('body').css("background-color", "white").css("color","black"); 
});

您可以在这里尝试： http://jsfiddle.net/uJcB7/1550/

Answer 4

不要摆弄body元素本身上的trait<>；而是在所需的CSS中定义 styles 。然后，如果您将来改变主意，您要做的就是更改CSS，而不是通过 all 遍历您的JavaScript并更改您修改body元素样式的每个位置。

正常（白天）模式是黑白的，并且不会添加任何类别：.style()。当您切换到夜间模式时，它将变为黑色白色，由添加类<body>

表示

<body class="nightmode">

// Using jQuery ...
//$('#nightmode').change(function() {
//    $('body').toggleClass('nightmode');
//});

// Using plain js ...
document.getElementById('nightmode')
    .addEventListener('change', function(e) {
        document.body.classList.toggle('nightmode')
    });

body {
    color: black;
    background-color: white;
}
body.nightmode {
    color: white;
    background-color: black;
}

使用JS输入选中的更改正文背景色

4 个答案: