jQueryでcssの:before・:afterの疑似要素のstyle・contentを変更する

プロモーションが含まれています

jQueryでcssの「:before」、「:after」などの疑似要素のstyleを変更する方法

jQueryでcssの「:before」、「:after」などの疑似要素のstyleを変更する方法です。
色や背景などのデザインだけでなく、contentの内容も変更できます。

css関連記事

関連記事をもっとみる

jQueryで要素のcssを変更する

JavaScript

$('#red').css('color', 'red');

要素に対しては、こんな感じで、idがredの要素の文字色を赤色に変更できます。

jQueryでcssの疑似要素は変更できない

JavaScript

$('#red:before').css('color', 'red');

こんな感じで疑似要素にアクセスしたいところですが、疑似要素は非DOMのため、これではできません。

jQueryでcssの疑似要素を変更させる方法

方法は2つあります。


1. styleタグをjQueryで操作してcssの疑似要素を反映させる方法。
2. classをjQueryで操作してcssの疑似要素を反映させる方法。

styleタグをjQueryで操作して疑似要素を反映させる

html

<style id='stylesheet' type='text/css'></style>

JavaScript

$("#stylesheet").html('
//cssの記述
#red:before{
  content: "変更";
  color: red;
}
');

可変させたい箇所のみを記載する用の、styleタグにidを振って、その中に疑似要素のcssを入れ込みます。
記載するのは、css記述方法でOKです。
すると疑似要素でもcssを変更することができます。
ただし、中身を全て変更するので、変更が必要な箇所だけを記載しましょう。

classをjQueryで操作して疑似要素を反映させる

See the Pen
by むぅ (@mugenweb)
on CodePen.0

<h3 class="open_h3 btn-1">BRAND INFO</h3>

css

.open_h3.active::after {
  content: "▲";
}
.open_h3::after {
  content: "▼";
}

JavaScript

$('.btn-1').click(function () {
  $(this).toggleClass('active');
});

この例では、可変させたい箇所に、activeのクラスを付け外しすることでcssの疑似要素を変更します。

クラスを変更することで、疑似要素のcontentで指定しているテキストを変更させています。

アコーディオンメニューでも使っています。

【jQuery】コピペでできる!クリックで開閉するアコーディオンメニューサンプル8選
jQueryのslideToggleを使った、クリックで開閉するアコーディオンメニュー(開閉パネル)を、7種類実装しました。 クリックしたときに開いたままにしておくものや、開いたアコーディオンメニュー以外は自動で閉じる、最初から開いておく、閉じるボタンで閉じる、多階層のアコーディオンメニュー、アンカーリンクをクリックで、スクロール&該当アコーディオンメニューの開閉などのサンプルです。

コメント

タイトルとURLをコピーしました