Use of Pseudo-Element ::before in JavaScript

Question

How can I change the CSS property ::before in JavaScript?

My CSS code looks like this:

#all-address::before
{
    content: '';
    height: 20px;       
    background: linear-gradient(to bottom, transparent 0%, white 45%, white   100%);
    z-index: 3;
    display: none;
}

Now I want change display: none to display: block with help of JavaScript.

I tried this code but it doesn't seem to work:

var div = document.getElementById("all-address");
div.pseudoStyle("before", "display", "block");

You do this by changing the classNames associated with the element. Is there a reason the pseudo would need to be controlled by JavaScript directly? — daddygames, Sep 05 '19 at 14:00
i was in the middle of writing the answer when this got closed. here.. https://jsfiddle.net/dpub1kjL/ — I wrestled a bear once., Sep 05 '19 at 14:08
Wanted to answer with CSS variable, solution added it to linked question. — jcubic, Sep 05 '19 at 14:37

ManUtopiK · Accepted Answer · 2019-09-07T09:42:29.963

0

No, you cannot access :before or :after from javascript, because they are not a part of the DOM. However you can still achieve your goal by using CSS classes. Example:

<script>
    document.getElementById('abc').className += "minus";
</script>

<style>
    #all-address:before {
        display: none;
    }
    #all-address.minus:before {
        display: block;
    }
</style>

edited Sep 07 '19 at 09:42

answered Sep 05 '19 at 14:00

ManUtopiK

4,495
3
38
52

thanks... I add a + to script. document.getElementById('abc').className += "minus"; – zharf pzh Sep 07 '19 at 07:35

alexey · Answer 2 · 2019-09-05T14:27:13.127

-3

Try some think like this:

  window.getComputedStyle(
        document.querySelector('#all-address'), ':before'
    ).display='block';

edited Sep 05 '19 at 14:27

answered Sep 05 '19 at 14:02

alexey

783
1
7
19

1

Chrome gives `Uncaught NoModificationAllowedError: Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'display' property is read-only` when using this. – Peter B Sep 05 '19 at 14:06
Will throw error: `Uncaught DOMException: Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'display' property is read-only.` – ManUtopiK Sep 05 '19 at 14:06
Try new version. (property instead of method) – alexey Sep 05 '19 at 14:27

Use of Pseudo-Element ::before in JavaScript

2 Answers2