jQueryで疑似要素の内容を変更する方法を解説!
jQueryで疑似要素の内容を変更する方法をサンプルコード付きで解説します。jQueryで疑似要素の内容を変更するにはいくつか方法があります。その方法について2つ取り上げ、項目を分けて解説します。
jQueryで疑似要素の内容を変更したい
jQueryでCSSで設定した::before
、::after
のcontent
の内容を変えたいという時がよくあります。
その方法はいくつかあるのですが、ここではその中でもよく使う2つの方法を項目を分けて解説します。
jQueryで疑似要素の内容を変更する方法
ではjQueryで疑似要素の内容を変更する方法について解説します。
toggleClassメソッドを用いる方法
1つ目の方法としてはtoggleClass
メソッドを用いて、1つ前のクラスを削除して、新しいクラスを取得するという方法があります。
このようにtoggleClass
メソッドを用いることで、動的なクラスの切り替えにより疑似要素の内容を変更することができます。
data-属性を用いる場合
こちらの方法はHTMLにてdata-name
属性にクリックした時、変わる疑似要素の内容を記述し、CSSの擬似要素でcontent
プロパティにattr(data-name)
とCSSのattr
関数を記述することがポイントです。
では実際にサンプルコードを通して確認してみましょう。
このようにボタンをクリックすると、疑似要素の内容が変わることが分かります。
jQueryにてdata-item
の値を変更させることにより、content: attr(data-item)
の値も変更されるので、疑似要素の内容が変わります。
CSSのattr
関数について詳細知りたい方は下記も参考にしましょう。
まとめ
いかがでしたでしょうか?
ここで紹介した2つの方法を用いることで簡単に疑似要素の内容を変更することができます。
ぜひここで紹介した方法を試してみてください。