【jQuery】要素が「横幅」と「縦幅」を持って表示されているかどうかを確認する方法。

Ads by Google

HTMLコード内に記述してある要素が、横幅と縦幅を持って、ウィンドウ内に表示されているかどうかを判定する方法を紹介します。

例えばある特定の要素に、スタイルシート側でwidth:0; height:0;を指定すると、当然その要素は表示されません。display:none;も同様で横幅と縦幅がゼロになりますね。

このように非表示になっている要素は jQuery の「:hidden」セレクタでマッチさせることができます。
具体的には document内で高さと幅を持ってスペースを占めているかどうかで判断されるとのこと。

以下のようなコードにすると簡単で使いやすいですね。

if ($("#sample").is(":hidden")) {
	// 非表示のときの処理
} else {
	// 表示しているときの処理をする
}

なお、CSSでvisibility:hidden;を効かせた要素は、実際には見えていなくても横幅と縦幅があり、スペースを占めているので、この場合は対象外となります。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google