Question

如何在JavaScript中更改CSS属性::before？

我的CSS代码如下：

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

现在，我想在JavaScript的帮助下将display: none更改为display: block。

我尝试了这段代码，但似乎不起作用：

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

Answer 1

否，您不能从javascript访问:before或:after，因为它们不是DOM的一部分。但是，您仍然可以通过使用CSS类来实现您的目标。示例：

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

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

Answer 2

尝试这样思考：

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

在JavaScript中使用伪元素:: before

2 个答案: