javascript 有没有办法重置 :after/:before 元素的 CSS 规则？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9798210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any way to reset :after/:before CSS rules for an element?
提问by Qtax
Is there any way to (robustly) reset any possible :afterand :beforeCSS rules for a newly created element?
有什么办法（强劲）重置任何可能:after和:beforeCSS规则，新创建的元素？
Usually you can just set the style rules you want to reset on the element directly (with !importantif you want to be sure), but I don't know of any way of changing rules defined in :afteron the element only.
通常你可以直接在元素上设置你想要重置的样式规则（!important如果你想确定的话），但我不知道有什么方法可以改变:after仅在元素上定义的规则。
(Only has to work with Chrome, if at all possible.)
（如果可能的话，只需要使用 Chrome。）
An exampleat jsFiddle.
一个例子在的jsfiddle。
The content added with the :before/:afterrules is affecting the value returned by clientHeight.
添加了:before/:after规则的内容会影响clientHeight.
回答by user123444555621
There is a DOM2 APIfor that matter. The correct way to do this is
有一个DOM2 API可以解决这个问题。正确的做法是
document.getOverrideStyle(p, ':after').display = 'none'; // or
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';
Unfortunately, no browser has implemented it. (Webkit returns null, Firefox has no such method). It looks like CSS3 doesn't even bother talking about that anymore, maybe because the usecases are very rare.
不幸的是，没有浏览器实现了它。（Webkit 返回 null，Firefox 没有这样的方法）。看起来 CSS3 甚至不再费心谈论这个，也许是因为用例非常罕见。
So you're gonna have to do some id/className magic as suggested aboveor in the other thread
回答by Phil
I'd just assign a class name to the new elements that does not have :before/ :aftercontent.
我只是为没有:before/:after内容的新元素分配一个类名。
Example - http://jsfiddle.net/84kZK/1/
回答by benesch
Ah, okay. You can write new CSS that resets the offending :before/:afterpseudo-elements:
啊好吧。您可以编写新的 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;
}
?Assigning a random ID to the element you pass in (if it doesn't have one) allows you to hack-up inline styles—rather than accessing el.beforeStyle, you can use CSS selectors: el#rkhjr828t9g:before.
? 为您传入的元素分配一个随机 ID（如果它没有）允许您修改内联样式——而不是访问el.beforeStyle，您可以使用 CSS 选择器：el#rkhjr828t9g:before。
You may need to add more rules to fully reset the styles. jsFiddle:view me!
您可能需要添加更多规则以完全重置样式。jsFiddle：看我！
http://www.w3.org/TR/CSS21/generate.html#before-after-content
http://www.w3.org/TR/CSS21/generate.html#before-after-content
?The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.
For example, the following document fragment and style sheet:
<p> Text </p> p:before { display: block; content: 'Some'; }...would render in exactly the same way as the following document fragment and style sheet:
<p><span>Some</span> Text </p> span { display: block }Similarly, the following document fragment and style sheet:
<h2> Header </h2> h2:after { display: block; content: 'Thing'; }...would render in exactly the same way as the following document fragment and style sheet:
<h2> Header <span>Thing</span></h2> h2 { display: block; } span { display: block; }
? :before 和 :after 伪元素与其他框交互，就好像它们是插入到关联元素中的真实元素一样。
例如，以下文档片段和样式表：
<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; }
回答by bumfo
Use ruleSelector("ref::before")[0].styleinstead of document.getOverrideStyle(ref, ':before').
使用ruleSelector("ref::before")[0].style代替document.getOverrideStyle(ref, ':before')。
http://jsfiddle.net/s3fv8e5v/4/
http://jsfiddle.net/s3fv8e5v/4/
<!DOCTYPE html>
<title>CSS</title>
<style>
body {
font: 200%/1.45 charter;
}
ref::before {
content: '##代码##A7';
letter-spacing: .1em;
}
</style>
<article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article>
<script>
function ruleSelector(selector) {
function uni(selector) {
return selector.replace(/::/g, ':') // for Firefox
}
return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {
return Array.prototype.slice.call(x.cssRules);
})), function(x) {
return uni(x.selectorText) === uni(selector);
});
}
var toggle = false,
pseudo = ruleSelector("ref::before").slice(-1);
document.querySelector("article").onclick = function() {
pseudo.forEach(function(rule) {
if (toggle = !toggle)
rule.style.color = "red";
else
rule.style.color = "black";
});
}
</script>
