javascript - 如何强制:fullscreen pseudoclass to follow the same rules as :not(:fullscreen)?

Question

我正在动态更改背景颜色，我也需要在全屏模式下发生同样的事情。不幸的是，伪类样式不能直接从 javascript 修改。

有什么方法可以说 :fullscreen 类应该遵循与 :not(:fullscreen) 相同的规则

任何从 javascript 动态更改 :fullscreen 样式的方法(没有任何 css 和更改元素的类)，也将不胜感激。

我更喜欢非 jquery 解决方案，但如果它必须是 jquery，那么它就必须。

Answer 1

您可以使用 CSS custom properties为了这。 (不是 supported by 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>

---

你也可以 directly modify the CSS rulesets .

---

但是，如果 :fullscreen {} 和 :not(:fullscreen) {} 具有相同的规则，那么您不妨只使用 * {}