Làm cách nào để biết phần tử DOM có được hiển thị không?

Question

Điều này không bị nhầm lẫn với "How to tell if a DOM element is visible?"

Tôi muốn xác định xem phần tử DOM đã cho có hiển thị trên trang hay không. Ví dụ: nếu phần tử là phần tử con của một phụ huynh có số display:none; thì phần tử đó sẽ không hiển thị.

(Điều này không có gì để làm với việc nguyên tố này là trong chế độ xem hoặc không)

tôi có thể lặp qua mỗi phụ huynh của nguyên tố này, kiểm tra display phong cách, nhưng tôi muốn biết nếu có một cách trực tiếp hơn?

Answer 1

Từ thử nghiệm nhanh trong Firefox, có vẻ như kích thước và thuộc tính vị trí (clientWidth, offsetTop, v.v.) đều trả về 0 khi phần tử bị ẩn bởi cha/mẹ là display:none.

Answer 2

Sử dụng Prototype:

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

Answer 3

Như tôi đang sử dụng MochiKit, những gì tôi đã đưa ra dựa trên câu trả lời Ant P là:

getElementPosition('mydiv').y != 0 

Tôi cũng có thể kiểm tra xem nó trong khung nhìn (theo chiều dọc) bởi:

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

Ngẫu nhiên điều này cũng hoạt động trong IE6.

Answer 4

Dựa vào vị trí là 0 là giòn. Bạn nên viết một hàm trợ giúp để lặp qua các bậc cha mẹ để kiểm tra kiểu hiển thị của chúng trực tiếp.

Answer 5

Đây là giải pháp lặp đi lặp lại -

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); 
}