@sochi-russia

Как скриптом на всю страницу наложить фильтр Grayscale?

На сайте есть кнопка, к ней привязан этот скрипт
"use strict";
const container = document.getElementById("night");
const table = document.getElementById("table");
const target = document.getElementById("target");
document.body.style.setProperty("--main-color", "#FFFFFF");
document.body.style.setProperty("--glav-color", "#26baee");
document.body.style.setProperty("--tdtable", "#777");
document.body.style.setProperty("--p-fontColor", "#ffffff");
document.body.style.setProperty("--group", "#f0f8ff");
document.body.style.setProperty("--texts", "#696969");
document.body.style.setProperty("--title", "#26baee");
document.body.style.setProperty("--navbar", "#fff");
document.body.style.setProperty("--hone", "#fff");
container.addEventListener("click", function(a) {
    target.classList.toggle("toggle");
    target.classList.toggle("sun");
    target.classList.toggle("moon");
    if (getComputedStyle(document.body).getPropertyValue("--main-color") == "#FFFFFF") {
        document.body.style.setProperty("--responsiv-color", "none");
        document.body.style.setProperty("--responsiv-fontColor", "beige");
        document.body.style.setProperty("--table-color", "#000000");
        document.body.style.setProperty("--glav-color", "#1C293E");
        document.body.style.setProperty("--h2-fontColor", "#040607");
        document.body.style.setProperty("--main-color", "#231C36");
        document.body.style.setProperty("--tdhover-fontColor", "#fff");
        document.body.style.setProperty("--trhover-fontColor", "#fff");
        document.body.style.setProperty("--blackwhite-fontColor", "#fff");
        document.body.style.setProperty("--tdtable", "#ffae46");
        document.body.style.setProperty("--p-fontColor", "#f5f5dc");
        document.body.style.setProperty("--group", "#000000");
        document.body.style.setProperty("--texts", "#ffae46");
        document.body.style.setProperty("--title", "#1c293e");
        document.body.style.setProperty("--navbar", "#464867");
        document.body.style.setProperty("--hone", "#fff");
        document.getElementById("glav").style.backgroundImage = "url('none')"
    } else {
        if (getComputedStyle(document.body).getPropertyValue("--main-color") == "#231C36") {
            document.body.style.setProperty("--responsiv-fontColor", "#000");
            document.body.style.setProperty("--responsiv-color", "#ffffff");
            document.body.style.setProperty("--glav-color", "#26baee");
            document.body.style.setProperty("--h2-fontColor", "#030303");
            document.body.style.setProperty("--table-color", "#FFFFFF");
            document.body.style.setProperty("--main-color", "#FFFFFF");
            document.body.style.setProperty("--tdhover-fontColor", "#000");
            document.body.style.setProperty("--trhover-fontColor", "#000");
            document.body.style.setProperty("--tdtable", "#777");
            document.body.style.setProperty("--p-fontColor", "#ffffff");
            document.body.style.setProperty("--group", "#f0f8ff");
            document.body.style.setProperty("--texts", "#696969");
            document.body.style.setProperty("--title", "#26baee");
            document.body.style.setProperty("--navbar", "#fff");
            document.body.style.setProperty("--hone", "#fff");
            document.body.style.setProperty("--blackwhite-fontColor", "#000")
        }
    }
});

Суть его, в том, что при нажатии кнопки меняются стили страницы, при повторном нажатии стили обратно возвращаются.
Мне необходимо сделать так, чтобы при нажатии на кнопку стилю body ставился фильтр grayscale
document.getElementById("one").style.filter ="grayscale(40%)";

Это работает, но обратно к обычному стилю почему-то не возвращает. Как сделать чтобы скрипт работал правильно, как правильно интегрировать в него вот эту строчку?
Вот исходник
https://codepen.io/djoga98/pen/VEREoM
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы