Jqueryでスタイルシートの在り無しを判断する

2021年9月21日

HTMLで動的な表示をする場合、JavascriptやJqueryは必須です。
高級水準言語のような記述ができ、後出し判定などHTMLやCSSでできないことができます。

今回特定タグにCSSが付加されているかどうかを判定して処理を分岐する仕様がありました。
具体的には、写真投稿がある場合は本文は左寄せ(float left)。
そうでない場合は、本文は真ん中に寄せるというものです。

判断ポイントは「画像投稿があるかないか？」ですが、JqueryレベルではPHPの処理を判断することができません。
そこで、画像にだけつけるスタイルシートが存在するかしないかで判断することにしました。

ここで疑問がわきました。
「Jqueryで特定タグにスタイルシートの有り無しを判断するにはどうすればよいのか?」
という点です。

いつものようにググって調べましたので、忘備録として記録いたします。

実際にスタイルシート有り無しを判断するサンプルを作ってみました

Jqueryでスタイルシートの有り無しを判断するサンプルを作ってみました。
こちらからご確認いただけます。

ボタンを押すとスタイルシートが適用され、さらにボタンを押すと、スタイルシートが解除されます。
スタイルシートの状態をフラグにして判断しています。

仕掛けは.is()関数

現在スタイルシートが適用されているか、されていないかをJqueryのis()関数で判断しています。
使い方は以下の通りです。

if ($(セレクタ名).is(スタイルシート名) == true)
{
//スタイルシートが存在している場合の処理
}
else
{
//スタイルシートが存在していない場合の処理
}

具体的なソースはこちら

先ほどのサンプルソースを以下に記載いたします。

このサンプルでは、is()関数を以下のように記述しています。
if ($(“p”).is(“.sample”) == true)

意味は、「P」タグに「.sample」スタイルシートが組み込まれていたらtrue。
となります。

ボタンを押すと、Jqueryで「.sample」スタイルシートを加えます。
さらにボタンをおすと、Jqueryで「.sample」スタイルシートを外します。

現在「.sample」スタイルシートが適用されているかどうかをis()関数で判断しています。

注意点としては、スタイルシート名に「.」や「#」をつける点です。
addClass()やremoveClass()の場合は「.」や「#」をつけません。
この辺がややこしかったりします。

is()関数を使用すれば、スタイルシートが適用されているかどうかを判断できる。ということを学びました。
本記事がお役に立てば幸いです。