jQuery: Check if Element is Visible or Hidden

Posted by – December 23, 2011

用 jQuery 編寫網頁效果時經常需要檢查網頁元素 (element) 的狀態,像是可見 ( visible ) 或是隱藏 ( hidden )。

常見的寫法是

if( $(element).css('display') == 'block' )

或是

 if( $(element).css('display') == 'hidden' )

不過我一直覺得這兩種寫法很累贅,又萬一元素的顯示狀態不是 block,而是 inline-block 或是別的呢?在翻閱 jQuery 文件時想到一個更便捷的用法,用 is 來檢查元素狀態即可。

$(element).is(":visible")

回傳值是 true or false,更方便。

if( $('#foo').is(':visible') ) {
    // it's not hidden, do something
}
else {
    // it's hidden so do something else
}

References:

Leave a Reply

Your email address will not be published. Required fields are marked *