【jQuery】擬似要素の::beforeや::afterを変更する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
CSSを記述している際、::beforeや::afterを使用することは多いと思います。これらは擬似要素と言われる非DOM要素となります。非DOM要素なのであとからJavaScriptやjQueryを使って色を変えたり、サイズを変えたりすることは出来ません。
なので泣く泣く「HTML記述に変更する」ということを経験された方も多いと思います。
今回はjQueryで擬似要素の::beforeや::afterを操作する方法を解説したいと思います。
クラスを追加削除することで擬似要素を操作する
jQueryで擬似要素を操作するにはクラスを変更することで操作することが可能です。直接jQueryで擬似要素を書き換えるのではなく、予め用意しておいた変更後の擬似要素を指定したクラスへjQueryを使い操作します。
jQueryを使用してクラスを追加して擬似要素を操作する
<div class="button"></div>.button::before{
content: "解除中";
}
.button.active::before{
content: "選択中";
}$(function(){
$(".button").on('click',function(){
$(this).toggleClass("active");
});
});上記例では.buttonがついた用ををクリックしたとき、クリックした.buttonに.activeを追加しています。この.activeの擬似要素に別の内容を記述することでCSSの優先順位の関係で擬似要素の内容が上書きされ、結果的にjQueryで擬似要素を操作したことになります。
以下実際のサンプルを確認してみましょう。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
styleタグに内容を追加して議事要素を操作する
<style id="style" type="text/css"></style>
<div class="button"></div>.button::before{
content: "解除中";
}$(function(){
$(".button").on('click',function(){
$("#style").html('.button::before{content: "選択中";}');
});
});See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
こちらの方法では先ほどのように予めスタイルシートに変更後の議事要素を記述しておくのではなく、クリックしたタイミングで直接変更後の疑似要素を生成し、htmlメソッドで追加しています。
厳密には直接議事要素を操作しているわけではありませんが、このような発想次第ではjQueryで操作することが可能です。
