CSSを書く時に::beforeや::afterという疑似要素にcontentを指定して装飾に使ったりテキストを表示させることがあります。
しかし疑似要素は非DOMなので、後からJavaScriptで色を変えたりcontentで設定しているテキストを他のものに書き換えることができません。
それでもなんとかしたいという時に使えるアイデアを紹介します。
クラスによってスタイルを上書きしたり元に戻して解決する
まずは次のようにCSSで擬似要素のスタイルを設定します。
1 2 3 4 5 6 7 | .box_a::before { content: "これはbox_aのcontentです。"; } .box_b::before { content: "contentが変更されます。"; } |
ここで設定するスタイルはcontent以外でも構いません。
2つのクラスを用意してそれぞれの疑似要素にスタイルを指定しておいてください。
上記の例でいうと.box_aがついた要素に.box_bのクラスが追加されれば、.box_b::beforeのCSSが適用されるはずです。
クラスの追加・削除はjQueryで行います。
1 2 3 4 5 | $(function(){ $(".btn_a").on("click", function() { $(this).toggleClass('btn_b'); }); }); |
.btn_bのクラスが要素についたりはずれたりすることで、適用されるCSSが切り替わります。
実際に動作するCodePenを作ったので参考にしてください。
ボタンのテキストは疑似要素にcontentを設定して表示されていますが、ボタンをクリックすると内容が切り替わります。
See the Pen MEvQPy by Daisuke Koshimizu (@dkossy) on CodePen.
厳密には疑似要素を操作しているわけではなく、クラスの切り替えによって適用されるCSSを上書きしているに過ぎませんが、こうしたアイデアもあることを覚えておくとどこかで役に立つかもしれません。
以上、jQueryで擬似要素の::beforeや::afterの内容を変更する方法でした。それではまた！
福岡市の中小企業向けホームページ制作・リニューアルならシンス株式会社。
