特定のDOM要素が表示されているかどうかを確認する方法

Question

jQueryを使用して、特定の要素が可視かどうかを判断する最も簡単な方法は何ですか？現在のビューポート内ではなく、ページ上に表示されることを意味します。

要素またはその祖先がdisplay: noneまたはvisibility: hiddenのようなCSS規則を持つ場合は、関数はfalseを返す必要があります。 overflow: hiddenについて心配する必要はありません。

Answer 1

:visibleセレクタをisメソッドで使用してください。

if($('elementSelector').is(':visible')){ 
    //Element is visible 
} 

Answer 2

is()メソッドを使用できます。

$('#element').is(':visible'); 

Answer 3

http://api.jquery.com/visible-selector/

$('#mydiv').is(":visible"); 

Answer 4

$('div:visible');すべての可視divsを返します。

また、それはjQuery 1.3.2 changelogのこのセクションは注目に値します。そのブラウザ-報告offsetWidthまたはoffsetHeightが0より大きい場合はjQueryで

は要素1.3.2

が表示されているがそれはつまり、あなたの要素のCSSの場合displayが "none"であるか、親/祖先要素の表示が "none"であるか、または要素の幅が0で要素の高さが0の場合、要素はhiddenとして報告されます。