jQueryでcssの「:before」、「:after」などの疑似要素のstyleを変更する方法です。
色や背景などのデザインだけでなく、contentの内容も変更できます。
もくじ
css関連記事
レスポンシブ対応がカンタンに！CSS aspect-ratioプロパティの使い方
jQuery UIのsortableを使ってリストをドラッグで並び替える
HTMLのsvgタグとJavaScriptで円グラフの画像をつくる
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
placeholderを見やすく！jQuery+css3でつくるフローティングラベル
効率よくセレクタを指定してcss効かせるサンプル！21選
楽天スマホで使える！classを使わずにcssを適用する裏技
cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル10選
cssで要素に動きや変化をアニメーションでつける、keyframesの使い方
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で指定しているテキストを変更させています。
アコーディオンメニューでも使っています。
コメント