问如何强制:fullscreen伪类遵循与:not(:fullscreen)相同的规则？
EN

Stack Overflow用户

提问于 2019-04-15 02:54:44

回答 1查看 29关注 0票数 0

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

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

任何要改变的方法:从javascript动态地改变全屏样式(不需要任何css和改变元素的类)，也是值得赞赏的。

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

javascript

css

回答 1

Stack Overflow用户

发布于 2019-04-15 03:05:54

您可以使用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) {}具有相同的规则，那么您也可以只使用* {}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55678882

复制

相似问题

问如何强制:fullscreen伪类遵循与:not(:fullscreen)相同的规则？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制:fullscreen伪类遵循与:not(:fullscreen)相同的规则？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制:fullscreen伪类遵循与:not(:fullscreen)相同的规则？
EN