Javascript 有没有办法重置元素的CSS规则：after/：before？

是否有任何方法（可靠地）重置新创建元素的

:after

和

:before

CSS规则

通常，您可以直接在元素上设置要重置的样式规则（如果您想确定，请使用

！important

），但我不知道有什么方法可以更改

：after

中定义的规则

（如果可能的话，只需使用Chrome。）

---

一个示例位于

---

添加了

：before

/

：after

规则的内容影响了

clientHeight

返回的值，我只需为没有

：before

/

：after

内容的新元素指定一个类名

---

示例-

啊，好的。您可以编写新的CSS来重置有问题的

：before

/

：after

伪元素：

function resetPsuedo(el) {
    if (!el.id) el.id = makeId();
    var selector = "#" + el.id;

    var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style'),
    rules = document.createTextNode(selector + ":before, " + selector + ":after { content: '' }");

    style.type = 'text/css';
    if(style.styleSheet)
        style.styleSheet.cssText = rules.nodeValue;
    else style.appendChild(rules);
    head.appendChild(style);
}

function makeId() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

    for (var i=0; i < 15; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

…将以与以下文档完全相同的方式呈现 片段和样式表：

<p> Text </p>                   p:before { display: block; content: 'Some'; }

<p><span>Some</span> Text </p>  span { display: block }

<h2> Header </h2>     h2:after { display: block; content: 'Thing'; }

<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }

一些文本
span{display:block}

同样，以下文档片段和样式表：

<p> Text </p>                   p:before { display: block; content: 'Some'; }

<p><span>Some</span> Text </p>  span { display: block }

<h2> Header </h2>     h2:after { display: block; content: 'Thing'; }

<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }

头h2:after{display:block；content:'Thing'；}

…将以与以下文档完全相同的方式呈现 片段和样式表：

<p> Text </p>                   p:before { display: block; content: 'Some'; }

<p><span>Some</span> Text </p>  span { display: block }

<h2> Header </h2>     h2:after { display: block; content: 'Thing'; }

<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }

Header{display:block；}
span{显示：块；}

对那件事有一个明确的解释。正确的方法是

document.getOverrideStyle(p, ':after').display = 'none'; // or
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';

不幸的是，没有浏览器实现它。(, ). 看起来CSS3甚至不再讨论这个问题，可能是因为用例非常罕见

因此，您必须按照建议或在中使用

规则选择器（“ref:：before”）[0]。使用
样式而不是
文档。getOverrideStyle（ref，：before'）



CSS
身体{
字体：200%/1.45宪章；
}
参考：之前{
内容：'\00A7'；
字母间距：.1米；
}
根据1782年商业法，卖方可以向买方全额退款。
函数规则选择器（选择器）{
功能uni（选择器）{
返回选择器。为Firefox替换（/：：/g，，：'）/
}
返回Array.prototype.filter.call（Array.prototype.concat.apply（[]），Array.prototype.map.call（document.styleSheets，function（x）{
返回Array.prototype.slice.call（x.cssRules）；
}))，函数（x）{
返回uni（x.selectorText）==uni（选择器）；
});
}
var toggle=false，
伪=规则选择器（“ref:：before”）.slice（-1）；
document.querySelector（“article”）.onclick=function（）{
pseudo.forEach（函数（规则）{
如果（切换=！切换）
rule.style.color=“红色”；
其他的
rule.style.color=“黑色”；
});
}
另请看@primatology，看来BoltClock在这里给出了答案：但Chrome可能有一些特殊的访问/修改方法？可能是@Pumbaa80的复制品，但我对这些答案中的任何一个都不太满意。这是可行的，但我必须检查该类是否在其他任何地方（当前或将来）使用过，使其不那么可靠（理论上是这样）。我希望通过元素可以直接访问某些内容，例如
elem.beforeStyle
将非常好。；-）不，它们似乎没有根据@Qtax创建任何DOM元素，尽管它们没有添加任何可访问DOM的元素，但它们的行为就像添加到元素中的child
span
一样。请参阅编辑。这也会影响这些规则适用的其他元素，这是不需要的。@Qtax，随机生成的ID将起作用：）。只需传入元素，函数将处理其余部分。我知道这远不是理想的，但这是我们所拥有的最好的。很高兴知道有（曾经？）一个经过深思熟虑的API用于此，可惜它没有实现。好消息来源，+1.Firefox跟踪：21年前开放，在过去的3年中处于非活动状态（如果你不计算降低bug优先级的自动机器人，至少7年）。