jQueryで疑似要素の内容を変更する方法を解説!

jQueryで疑似要素の内容を変更する方法をサンプルコード付きで解説します。jQueryで疑似要素の内容を変更するにはいくつか方法があります。その方法について2つ取り上げ、項目を分けて解説します。

コンテンツ [表示]

  1. 1jQueryで疑似要素の内容を変更したい
  2. 2jQueryで疑似要素の内容を変更する方法
  3. 2.1toggleClassメソッドを用いる方法
  4. 2.2data-属性を用いる場合
  5. 3まとめ

jQueryで疑似要素の内容を変更したい

jQueryでCSSで設定した::before::aftercontentの内容を変えたいという時がよくあります。

その方法はいくつかあるのですが、ここではその中でもよく使う2つの方法を項目を分けて解説します。

Photo byStockSnap

jQueryで疑似要素の内容を変更する方法

ではjQueryで疑似要素の内容を変更する方法について解説します。

toggleClassメソッドを用いる方法

1つ目の方法としてはtoggleClassメソッドを用いて、1つ前のクラスを削除して、新しいクラスを取得するという方法があります。

このようにtoggleClassメソッドを用いることで、動的なクラスの切り替えにより疑似要素の内容を変更することができます。

あわせて読みたい
toggleClass()
jQueryのtoggleClass()はセレクタにマッチした要素に対して、引数で指定したクラスがなければ追加、すでに持っていれば削除を行うメソッドです。使い方をサンプルコード付きで解説します。

data-属性を用いる場合

こちらの方法はHTMLにてdata-name属性にクリックした時、変わる疑似要素の内容を記述し、CSSの擬似要素でcontentプロパティにattr(data-name)とCSSのattr関数を記述することがポイントです。

では実際にサンプルコードを通して確認してみましょう。

このようにボタンをクリックすると、疑似要素の内容が変わることが分かります。

jQueryにてdata-itemの値を変更させることにより、content: attr(data-item)の値も変更されるので、疑似要素の内容が変わります。

CSSのattr関数について詳細知りたい方は下記も参考にしましょう。

あわせて読みたい
attr
CSSのattr関数はHTMLタグに設定されている属性の値を取得する関数です。疑似要素やcontentプロパティを組み合わせる事でHTMLタグの属性の値をCSSで扱う事が出来ます。使い方をサンプルコード付きで解説します。

まとめ

いかがでしたでしょうか?

ここで紹介した2つの方法を用いることで簡単に疑似要素の内容を変更することができます。

ぜひここで紹介した方法を試してみてください。

GeekHive採用サイト

関連記事