Как заставить: полноэкранный псевдокласс следовать тем же правилам, что и: not (: fullscreen)?

Question

Я изменяю цвет фона динамически, и мне нужно, чтобы то же самое происходило и в полноэкранном режиме.К сожалению, стили псевдоклассов нельзя изменить прямо из javascript.

Есть ли способ сказать, что класс: fullscreen должен следовать тем же правилам, что и: not (: fullscreen)

Любой методизменить: полноэкранное моделирование из javascript динамически (без использования css и изменения класса элемента) также приветствуется.

Я бы предпочел решение без jquery, но если это должно быть jquery,тогда это должно.

Answer 1

Для этого вы можете использовать Пользовательские свойства CSS .(Не поддерживается MSIE ).

document.body.addEventListener("click", event => {
    const t = event.target;
    if (t.dataset && t.dataset.color) {
        document.body.style.setProperty("--my-color", t.dataset.color);
    }
});

body {
    --my-color: yellow;
}

div {
    display: inline-block;
    background: var(--my-color);
    height: 2em;
    width: 2em;
    border: solid black 1px;
}

<div class="one"></div>
<div class="two"></div>

<button type="button" data-color="red">Red</button>
<button type="button" data-color="blue">Blue</button>

---

Вы также можете напрямую изменять наборы правил CSS .

---

Однако,если :fullscreen {} и :not(:fullscreen) {} имеют одинаковые правила, то вы можете просто использовать * {}