Javascript Кнопка включения / выключения - PullRequest
Новая
       2

Javascript Кнопка включения / выключения

0 голосов
/ 18 июня 2020

Надеюсь, у вас все в порядке в этих обстоятельствах. Я создаю веб-страницу, на которой есть кнопка, которая при нажатии меняет цвет веб-страницы. Я новичок в программировании, поэтому все еще пытаюсь во всем разобраться. У меня есть следующий код CSS, который инвертирует цвета - 

body {
filter: invert(0.85);
}

Однако я sh добавляю кнопку, которая при нажатии инвертирует цвета, а при повторном нажатии возвращает их в нормальное состояние ( ie снова их инвертирует). Любая помощь будет оценена.

Ответы [ 3 ]

1 голос
/ 18 июня 2020

Для реализации этого поведения вам понадобится немного JavaScript.

Сначала давайте дадим класс CSS коду, который инвертирует цвета: 

body.colors-inverted {
  filter: invert(0.85);
}

Затем давайте добавим кнопку к нашему HTML: 

<button id='invert-colors'>Invert colors</button>

И заставим кнопку переключать класс colors-inverted на элемент body: 

// find the button on the page
let btn = document.querySelector('#invert-colors');

// when clicking the button, toggle the class on <body>
btn.addEventListener('click', function() {
  document.body.classList.toggle('colors-inverted');
});

( Примечание: приведенный выше сценарий необходимо добавить в элемент <script> где-нибудь в HTML, где угодно после элемента <button>).

Вот рабочий пример с двумя способы сделать это:

  • На основе кнопки (с использованием события click)
  • На основе флажка (с использованием события change и состояния e.target.checked) 

let btn = document.querySelector('#invert-colors-button');
btn.addEventListener('click', function toggle() {
  document.body.classList.toggle('colors-inverted');
});

let cb = document.querySelector('#invert-colors-checkbox');
cb.addEventListener('change', function(e) {
   document.body.classList.toggle('colors-inverted', e.target.checked);
});
body.colors-inverted {
  filter: invert(0.85);
}
<h1>Welcome to my website!</h1>
<button id='invert-colors-button'>Invert colors</button>

<input type='checkbox' id='invert-colors-checkbox'/> 
<label for='invert-colors-checkbox'>Invert colors</label>
0 голосов
/ 18 июня 2020

Есть несколько способов сделать это, но на самом деле это зависит от того, как выглядит остальная часть вашего проекта. Если вы используете фреймворк, такой как React для javascript или Django для Python, я бы посоветовал вам поискать библиотеку тем, например styled-components. Если вы используете простые CSS и Javascript, как я предполагаю, вы можете создать простую функцию переключения javascript, которая переключает класс в основном элементе <html>. Затем вы можете создать свои стили соответствующим образом.

образец: 

<html>
  <head>
    <style>
      html body {
        background-color: white;
        color: black;
      }
      html.inverted body{
        background-color: black;
        color: white;
      }
    </style>
  </head>
  <body>
    <h2>Hello!</h2>
    <p>this is a paragraph</p>
    <button onclick="toggleTheme()">click me to toggle theme</button>
    <script>
      function toggleTheme() {
        let body = document.documentElement;
        let toggleClass = 'inverted';

        if (body.classList.contains(toggleClass)) {
          body.classList.remove(toggleClass);
        } else {
          body.classList.add(toggleClass);
        }
      }
    </script>
  </body>
</html>

В этом примере все, что он делает, это переключает цвет фона и цвет текста, но вы можете заставить его влиять на любой класс или элемент, добавив перед ним модификатор toggleClass (например, html.inverted h1.myHeading).

0 голосов
/ 18 июня 2020

Вы можете добавить класс в тело для переключения темного режима 

const body = document.querySelector('body');
const button = document.querySelector('.toggleDarkmode');

button.addEventListener('change', ()=> {
  body.classList.toggle('active')
})
body.active {
  filter: invert(0.85);
}

.wrapper {
  background: white;
  height: 100vh;
width: 100vw;
}
<body>
  <div class="wrapper">
    <input type="checkbox" class="toggleDarkmode">Dark MODE!
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...