Введено изменение цвета фона тела с помощью JS - PullRequest
Новая
       7

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

0 голосов
/ 24 августа 2018

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

HTML: 

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

Ответы [ 4 ]

0 голосов
/ 24 августа 2018

Не играйте с .style() на самом элементе тела; вместо этого определите стили в CSS, которые вы хотите. Затем, если вы передумаете когда-нибудь в будущем, все, что вам нужно будет сделать, это изменить CSS, вместо того чтобы проходить через all ваш 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>
0 голосов
/ 24 августа 2018

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

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>
0 голосов
/ 24 августа 2018

Используя 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/

0 голосов
/ 24 августа 2018

Вы можете попробовать что-то вроде этого: 

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

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

...