Введенный флажок изменил цвет фона основного тела с помощью JS

Question

Введенный флажок изменил цвет фона основного тела с помощью JS

У меня есть флажок ввода. Я хочу изменить все CSS тела HTML (белый фон с телом и черный текст, если он не установлен, и черный цвет тела и белый текст при проверке).

HTML:

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

javascript,html,css,onsen-ui,

2

Ответов: 4

JavaScript, HTML, CSS, онсэн-щ,

Похожие вопросы

score 1 · Accepted Answer

1 принят

Вы можете попробовать проверить изменение флажка, а затем установить цвет фона и цвет текста соответственно.

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>

score 1 · Accepted 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 ;
};

Надеюсь это поможет

score 0 · Accepted Answer

0

Использование 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/

score -1 · Accepted Answer

-1

Не ходите с помощью .style()самого элемента тела; вместо этого определите стили в CSS, которые вы хотите. Затем, если вы передумаете когда-нибудь в будущем, все, что вам нужно сделать, это изменить CSS вместо того, чтобы проходить через весь ваш javascript и изменять каждое место, где вы изменяете стили элемента body.

Нормальный режим (день) черный на белом, и будет не добавлено ни один класс: <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;
}

<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>