4

今のところ、疑似要素 :after および :before を変更するための解決策を見つけるために、stackoverflow フォーラムのほぼ全体を読んだと感じています。

私の理解では、ブラウザが表示するときにDOMにないため、変更できません。しかし、それはどこにありますか？ブラウザのメモリに???

:after/:before で疑似要素を取得することはできないようです。

だから私は別の方法を試しました：

// read CSS value      
var color = window.getComputedStyle(document.querySelector('.myCssClass'), ':before').getPropertyValue('background-color');
// write CSS value
window.getComputedStyle(document.querySelector('.myCssClass'), ':before').setProperty('background-color', "#FF0000");

しかし...満足する代わりに、ブラウザーは次のように返します。

NoModificationAllowedError: Modifications are not allowed for this document

ああ、神様！！！したがって、これらを変更するための回避策はないようです。

だから今、私の大きな質問: CSS を使用して、:after/:before のように動作する追加のクラスを作成する方法はありますか? 試してみましたが、まったく違う結果になりました。

4

1 に答える 1

3

:beforeまたはを使用してクラスを定義できます:after(以下の例)。document.styleSheetsブラウザーはまた、配列のようなを介してスタイルシートを利用できるようにします。各シートはルールで構成されています (プロパティrulesまたはcssRulesブラウザに依存します)。ルールは変更できます。

しかし、スタイルシートで定義してからクラスを使用して操作するよりも面倒です。

.foo:before {
    content: "before foo ";
}
.bar:before {
    content: "before bar ";
}

次に、たとえば、この HTML:

<div class="foo">there is stuff</div>

次のようになります。

foo の前に何かがある

そして、それを変更できます：

document.querySelector(".foo").className = "bar";

そしてそれは次のようになります：

バーの前に物があります

実例| ソース

于 2013-11-07T15:57:42.567 に答える