Показать сообщение отдельно
  #4 (permalink)  
Старый 09.11.2018, 13:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118


небольшое дополнение
убрал day, стало одна строка classList.toggle
добавил outline: none; нет синей рамки при клике на кнопке
<!doctype html>
<html>
    <head>
        <title></title>
        <style>
            body {
                background: black no-repeat center;
                height: 100vh;
                margin: 0;
            }

            @media (max-width: 1200px) {
                body {
                    background-image: url(https://placeimg.com/640/480/nature/grayscale);
                }
                body.night {
                    background-image: url(https://placeimg.com/640/480/nature);
                }
            }

            @media not all and (max-width: 1200px) {
                body {
                    background-image: url(https://placeimg.com/1280/960/nature/grayscale);
                }
                body.night {
                    background-image: url(https://placeimg.com/1280/960/nature);
                }
            }

            button {
                border-radius: .5em;
                margin: 1em;
                padding: 1em;
                --color: #f06;
                font: bold 1.5em sans-serif;
                border: .25em solid var(--color);
                color: var(--color);
                background: white;
                transition: 300ms;
            }

            button:hover, button:focus {
                color: white;
                box-shadow: inset 0 0 0 2em var(--color);
            }
            button:focus {
                outline: none;
            }

        </style>
        <script>

            var count = 0;

            function setBg() {
                document.body.classList.toggle("night", count % 2 === 1);
                count++;
            }

            document.addEventListener("DOMContentLoaded", setBg);

        </script>
    </head>
    <body>
        <button onclick="setBg();">Переключить</button>
    </body>
</html>
Ответить с цитированием