2009-04-19 54 views
20

Tôi có hai divs như vậyLàm thế nào để có được chiều rộng tràn của một phần tử trong một trang web

<div id="parent" style="width:100px:overflow:hidden;"> 
    <div id="child"> 
     tooooooooooooooooooooo much content to fit in parent 
    </div> 
</div> 

Tôi đang tự động cập nhật nội dung của đứa trẻ và di chuyển nó bằng cách sử dụng jQuery. Tôi muốn có thể tìm được độ rộng của đứa trẻ nên tôi biết khi nào nên dừng di chuyển. Vấn đề là chiều rộng thực tế của đứa trẻ khi nội dung tràn ra hiện diện, rộng hơn cả màn hình (có vẻ là khoảng 2500 pixel với nội dung kiểm tra hiện tại). Đường viền của phần tử, nếu phần tử của nó, không mở rộng đến chiều rộng thực của nội dung, văn bản sẽ tràn ra ngoài đường viền hiển thị.

Sử dụng jQuery $('#child').width, các thuộc tính clientWidth, scrollWidth (cảm ơn bobince) và offsetWidth tất cả tối đa ở 1024px (chiều rộng màn hình của tôi). Có ai biết cách nào để tìm hiểu xem nội dung của phần tử bao gồm tràn không? Nếu nó giúp, ứng dụng tôi đang xây dựng sẽ chạy trong một môi trường loại kiosk, do đó, chỉ có một giải pháp Firefox (ngay cả một phiên bản hàng đêm) là tốt.

Cập nhật: scrollWidth trên công trình gốc, tôi phải đọc kỹ hơn, cảm ơn bạn lần nữa.

Trả lời

25
document.getElementById('parent').scrollWidth 

scrollWidth là tiện ích mở rộng của IE được hỗ trợ ít hơn so với offsetWidth. Tuy nhiên ngày nay tất cả các trình duyệt máy tính để bàn hiện đại đều có nó.

+0

Tôi sợ scrollWith sử dụng hết ở 1024px là tốt. Nhờ đề nghị mặc dù. –

+0

Làm việc cho tôi trong FF3 - đăng một mẫu mã hoàn chỉnh không hoạt động? Kiểm tra xem bạn đang xem cuộn ‘parent’ ’chứ không phải‘ child ’và nội dung quá rộng không tự động quấn ở 1024 (hoặc sử dụng‘ khoảng trống trắng: không bọc ”để dừng). Cuối cùng kiểm tra cú pháp - trong ví dụ của bạn có dấu hai chấm thay vì dấu chấm phẩy giữa các quy tắc. – bobince

+0

aha, cha mẹ, bỏ lỡ bit đó, nó hoạt động! Cảm ơn nhiều. –

4

Sử dụng JQuery, bạn có thể làm:

$('#parent')[0].scrollWidth 
+0

Kéo phần tử con ra khỏi mảng phần tử jQuery trả về nút DOM, giống với câu trả lời ở trên ('document.getElementById ('parent'). ScrollWidth'). Lợi ích là 'scrollWidth' có thể được thực hiện gọn gàng mà không cần jQuery. – Hans

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