How to force :fullscreen pseudoclass to follow the same rules as :not(:fullscreen)?

Question

I am changing the background-color dynamically, and I need the same thing to happen in fullscreen as well. Unfortunately pseudoclasses styles cannot be modified straight from javascript.

Is there any way in which I can say that the :fullscreen class should follow the same rules as :not(:fullscreen)

Any method to change :fullscreen styling from javascript dynamically (without having any css and changing the class of the element), would also be appreciated.

I would prefer a no-jquery solution, but if it has to be jquery, then it has to.

related: https://stackoverflow.com/q/54749402/8620333 – Temani Afif Apr 14 '19 at 19:21 — Temani Afif, Apr 14 '19 at 19:21

score 0 · Answer 1 · answered Apr 14 '19 at 19:05

You can use CSS custom properties for this. (Not 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>

You could also directly modify the CSS rulesets.

However, if :fullscreen {} and :not(:fullscreen) {} have identical rules, then you might as well just use * {}

How to force :fullscreen pseudoclass to follow the same rules as :not(:fullscreen)?

1 Answers1