输入检查使用JS更改主体背景颜色

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 元素本身的 .style()；而是在 CSS 中定义您想要的 styles。然后，如果您将来改变主意，您所要做的就是更改 CSS 而不是遍历 all 您的 javascript 并更改每个地方修改正文元素样式的位置。

普通（白天）模式是白底黑字，不会添加 class：<body>。当你切换到夜间模式时，它将是黑底白字，通过添加 class <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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
 <h1>A Heading</h1>
 <div>
 <input id="nightmode" type="checkbox">
 <label for="nightmode">Activate night mode</label>
 </div>
 
 <section>
     <p>A section with a paragraph</p>
 </section>
 <section>
     <p>A second section</p>
 </section>
 <footer>The footer</footer>
</body>

输入检查使用JS更改主体背景颜色

Input checked change body background colour using JS

html

javascript

css

onsen-ui