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

Question

[sochi-russia]

На сайте есть кнопка, к ней привязан этот скрипт

"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

Comments

[Олег]

Добрый вечер, вы в блоке кода else {...} сделали так, чтобы стилю фильтра присваивалось значение "none"?

document.getElementById("one").style.filter ="none";

[sochi-russia]

Олег, Здравствуйте. Изначально до нажатия кнопки фильтра быть не должно
Алгоритм такой.
Фильтра у объекта с ID=ONE нет, нажал кнопку, объекту с id(One) ставиться фильтр grayscale(100%), повторное нажатие ID(one) уже без фильтра

[black1277]

А зачем городить такую прорву кода, когда можно просто добавить/удалить класс тегу body при клике по кнопке?

[sochi-russia]

black1277, Потому что изначально по нажатию кнопки у меня менялись стили разных элементов и кнопка это условно вот ее код <div id="target" class="sun"><div>

[black1277]

сделайте для других элементов контекстные стили, типа:

body div {
color: red;
}
body.night div {
color: blue;
}

и у элементов будут меняться стили при смене класса в body

[sochi-russia]

black1277, Мне нужно непосредственно с тем скриптом, который я указал. Исходник в песочнице https://codepen.io/djoga98/pen/VEREoM

[sochi-russia]

Олег, Вот здесь исходник в песочнице https://codepen.io/djoga98/pen/VEREoM

[black1277]

вот так все работает:

const container = document.getElementById('container');
const target = document.getElementById('target');

document.body.style.setProperty('--main-color', '#FF9636');

container.addEventListener('click', () => {
  target.classList.toggle('toggle');
  target.classList.toggle('sun');
  target.classList.toggle('moon');

  if(getComputedStyle(document.body).getPropertyValue('--main-color') == '#FF9636') {
  document.getElementsByTagName('BODY')[0].style.filter ="grayscale(40%)";  
    document.body.style.setProperty('--main-color', '#1C3236');
  } else if(getComputedStyle(document.body).getPropertyValue('--main-color') == '#1C3236') {
    document.getElementsByTagName('BODY')[0].style.filter ="none";
    document.body.style.setProperty('--main-color', '#FF9636');
  }
});

в вашем примере по ссылке

[Олег]

sochi-russia, на 19-й строке приведённого кода вы можете поставить ваше document.getElementById("one").style.filter ="grayscale(40%)"; - включение фильтра
а на 38-й document.getElementById("one").style.filter ="none"; - отключение фильтра

[sochi-russia]

black1277, Спасибо огромное

[sochi-russia]

black1277, Появилась проблема, теперь нажатие мышки в любом месте ставит фильтр

[Kirgus]

Вы ссылку на codepen залили как код, а не как гиперссылку .-.