如何判斷是否顯示DOM元素？

Question

這不會與"How to tell if a DOM element is visible?"

我想確定給定的DOM元素是否在頁面上可見。 例如如果該元素是設置了display:none;的父級的子元素，則該元素將不可見。

（這有什麼好做的元素是否是在視口中與否）

我可以通過元素的每個父迭代，檢查display的風格，但我想知道是否有更直接的方式？

Answer 1

從Firefox的快速測試中，它看起來像大小和位置屬性（clientWidth，offsetTop等）全部返回0時，父元素被隱藏display:none。

Answer 2

使用Prototype：

if($('someDiv').visible) {...} 

Answer 3

由於我使用的是MochiKit，我想出了基於螞蟻普的回答是：

getElementPosition('mydiv').y != 0 

我也可以檢查它是否在視（垂直）通過：

y = getElementPosition('mydiv').y 
(y < getViewportPosition().y + getViewportDimensions().h && 
    getViewportPosition().y < y) 

順便說一句，這也適用於IE6。

Answer 4

依靠位置爲0是脆弱的。你最好寫一個輔助函數來遍歷父母直接檢查他們的顯示風格。

Answer 5

這裏的迭代求解 -

var elementShown = function(e){ 
    if (e == document) 
     return true; 

    if ($(e).css('display') == 'none') //or whatever your css function is 
     return false; 

    return elementShown(e.parentNode); 
}