2011-08-31 26 views
5

Tittle thực sự nói tất cả.jQuery - Phát hiện xem chiều cao của phần tử có lớn hơn chiều cao cửa sổ hay không và làm điều gì đó về nó

Về cơ bản tôi muốn phát hiện nếu div này 's height lớn hơn windowheight và làm điều gì đó về nó ..

Tôi đã làm điều này nhưng tôi không thể làm cho nó hoạt http://jsfiddle.net/dhkCa/3 Tại sao sẽ không cho nó hoạt động?

Chỉnh sửa: Sửa lỗi nhỏ trong mã css. Đã cập nhật liên kết Jsfiddle.

+0

nếu bạn cảnh báo 2 giá trị, bạn sẽ nhận thấy rằng chiều cao tài liệu dường như lớn hơn 20px so với chiều cao div [ví dụ tại đây] (http://jsfiddle.net/dhkCa/8/) –

Trả lời

17

document chứa tất cả các phần tử trong chính nó và chiều cao của nó là tổng của chiều cao của tất cả các yếu tố đó (tất cả các phần tử display:block, cộng với lề và đệm); do đó không có phần tử nào có thể cao hơn bản thân tài liệu. Những gì bạn cần làm là so sánh chiều cao của window, không phải là tài liệu của:

var div = $("div").height(); 
var win = $(window).height(); 

if (div > win) { 
    $("div").addClass('red'); 
} 

JS Fiddle demo.

+0

Right .. That cũng được nói rõ ràng jquery api .. Một lần nữa tôi chỉ không hiểu những gì tôi đọc. Cảm ơn (+1) và sẽ chấp nhận khi tôi có thể. – Joonas

+0

Bạn đang khá hoan nghênh; Tôi rất vui khi được giúp đỡ! = D –

0

Đối với phần tử có chiều cao cuộn khác với chiều cao cuộn của tài liệu, bạn có thể sử dụng element.getBoundingClientRect().height(Docs).

Các vấn đề liên quan