Question

我正在动态更改背景颜色，并且我也需要在全屏模式下进行相同的操作。不幸的是，伪类样式不能直接从javascript修改。

有什么方法可以说：fullscreen类应遵循与：not（：fullscreen）相同的规则

任何从javascript动态更改全屏样式的方法（不包含任何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) {}具有相同的规则，那么您最好也使用* {}

如何强制：fullscreen伪类遵循与：not（：fullscreen）相同的规则？

1 个答案: