jQueryでは「$(‘.example::before’).css(‘color’,’#ccc’);」のように指定しても、疑似要素はDOMではないため直接操作することができません。そのため、jQueryで擬似要素のプロパティを動的に変更させたい場合は、クラスを追加したりCSSを上書きしたりと一工夫必要です。
そんなわけで、jQueryを使って::beforeや::after等の疑似要素のプロパティを操作する方法を3つご紹介したいと思います。
jQueryで::beforeや::after等の擬似要素のプロパティを操作する方法
クラスを追加する
まずご紹介するのは、クラスを追加する方法です。該当の箇所にクラスを追加することで、疑似要素のスタイルを適用します。
HTMLはシンプルにこんな感じです↓
<div class="button">クリック</div>
CSSでは以下のように指定しておきます。
.active::before {
content: "";
display: block;
width: 50px;
height: 4px;
background: #ccc;
}
jQueryを使って、クリックした時に.activeクラスを追加してあげます。
<script>
$('.button').on('click', function() {
$(this).toggleClass('active');
});
</script>
これで、クラスが追加された時だけ疑似要素のスタイルが適用されることになります。
.button::beforeには別のスタイルを指定しておけば、クリックする度に擬似要素のスタイルを変更できますね。
ヘッダーにスタイルを追加する
続いてご紹介するのは、ヘッダーにCSSを追加してスタイルを上書きする方法です。
HTMLは先程と同じです。
<div class="button">クリック</div>
jQueryは以下のように記述します。
<script>
$(function() {
$('head').append('<style>.button::before { background: #aaa; } </style>');
});
</script>
<head>内の最後にCSSが追加され、「.button::before」のスタイルが上書きされます。
属性値を使う
操作したいプロパティがcontentのみである場合は、属性値を使って動的に値を変化させることができます。
HTMLでは、以下のように属性を指定しておきます。
<div class="button" data-attr="ボタン"></div>
CSSでは、contentの値に属性値を反映するように指定します。
.button::before {
content: attr(data-attr);
}
jQueryでは、属性値を変化させます。
<script>
$(function() {
$('.button').attr('data-attr', 'コンテンツの値');
});
</script>
「data-attr」という属性の名前は任意で変更できます。
上記ではページ読み込みで属性値を変更させていますが、クリック操作と組み合わせたり、発送次第で色々できそうですね。
あとがき
疑似要素をjQueryで直接操作することはできませんが、上述した方法を使えば、結果的に擬似要素のプロパティを変更できますね。
疑似要素のプロパティをjQueryで動的に変化させたい時は、ぜひ参考にしていただければと思います。
操作したいプロパティがcontentのみである場合の方法、助かりました。
記事にして頂きありがとうございます。
コメントありがとうございます！お役に立てたみたいで光栄です。