新しく作成された要素に対して可能な:afterと:before CSSルールを（堅牢に）リセットする手段はありますか？リセットする方法はありますか？要素のCSSルールの前に/：の後に？
通常、エレメントに直接リセットするスタイルルールを設定することができます（確信したい場合は!important）。しかし、エレメント上の:afterで定義されたルールを変更する方法はわかりません。
（のみすべての可能性であれば、Chromeで動作するように持っている。）
jsFiddleで例。
:before/:afterの規則で追加された内容は、clientHeightによって返された値に影響しています。
そのことについてはDOM2 APIがあります。これを行う正しい方法は、
document.getOverrideStyle(p, ':after').display = 'none'; // or
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';
です。残念ながら、ブラウザは実装されていません。 （Webkit returns null,Firefox has no such method）。 CSS3はそれについてもう話しても気にしないようです。おそらく用途が非常に稀なためです。
ですからつもりが示唆aboveとして、あるいはother thread
これについてのAPIを考案していたのは知っていましたが、それは実装されていません。良い情報源、+1。 – Qtax
私は:before/:afterの内容を持たない新しい要素にクラス名を割り当てます。
それはうまくいくが、クラスが他の場所（現在または将来）で使用されていないことを確認する必要があり、信頼性が低い（理論的にはそうである）。私は、要素を介して直接アクセス可能なもの（例えば、elem.beforeStyle'）が素晴らしいと期待していました。 ;-) – Qtax
ああ、大丈夫。あなたはハックアップするインラインことができます（それが1つを持っていない場合）あなたが渡し要素へのランダムIDを割り当てる
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;
}
：あなたは、問題に:before/:after擬似要素をリセットし、新しいCSSを書くことができますスタイル - el.beforeStyleにアクセスするのではなく、el#rkhjr828t9g:beforeのCSSセレクタを使用できます。
スタイルを完全にリセットするルールを追加する必要がある場合があります。 jsFiddle：view me!
http://www.w3.org/TR/CSS21/generate.html#before-after-content
：beforeと：彼らはちょうどそれに関連する 要素の内部に挿入実数要素であれば、擬似要素が など他のボックスと対話した後。例えば
、以下のドキュメントフラグメントとスタイルシート：
<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; }
利用ruleSelector("ref::before")[0].styleの代わりdocument.getOverrideStyle(ref, ':before')にいくつかのID /クラス名の魔法を行う必要があります。
http://jsfiddle.net/s3fv8e5v/4/
<!DOCTYPE html>
<title>CSS</title>
<style>
body {
font: 200%/1.45 charter;
}
ref::before {
content: '\00A7';
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>
//reference to this link:https://pankajparashar.com/posts/modify-pseudo-elements-css/ I wrote a demo and just modified the top attribute of ::before,here is the demo.
<head>
<meta charset="UTF-8">
<title>测试是否可以js修改伪类元素css yessssss</title>
<style type="text/css">
.htmlbox_close::before,
.htmlbox_close::after {
content: '';
position: absolute;
height: 2px;
top: 4%;
width: 3%;
left: 2%;
margin-top: -1px;
background: #51aed9;
height: 1.1%;
}
.htmlbox_close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.htmlbox_close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="htmlbox_close"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var str = window.getComputedStyle($('.htmlbox_close')[0], '::before').getPropertyValue('top');
console.log(str);
document.styleSheets[0].addRule('.htmlbox_close::before', 'top:100px');
document.styleSheets[0].insertRule('.htmlbox_close::before { top:100px }', 0);
document.styleSheets[0].addRule('.htmlbox_close::after', 'top:100px');
document.styleSheets[0].insertRule('.htmlbox_close::before { top:100px }', 0);
var str = window.getComputedStyle($('.htmlbox_close')[0], '::before').getPropertyValue('top');
console.log(str);
</script>
</body>
も良く、http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery – benesch
@primatology見ますBoltClockがそこでそれに答えたようです：http://stackoverflow.com/a/5041526/107152しかし、Chromeには、それらにアクセスするための特別な方法がありますか？ – Qtax
[JavaScriptからCSS擬似クラスルールを設定する]の複製が可能です。（http：//stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript） – user123444555621