Cách lấy chiều cao và chiều rộng tài liệu mà không cần sử dụng jquery

Cách lấy chiều cao và chiều rộng của tài liệu một cách thuần túy javascript tức là không sử dụng jquery.
Tôi biết về $(document).height()và $(document).width(), nhưng tôi muốn làm điều này trongjavascript.

Ý tôi là chiều cao và chiều rộng của trang.

var height = document.body.clientHeight;
var width = document.body.clientWidth;

Kiểm tra: bài viết này để giải thích tốt hơn.

Ngay cả ví dụ cuối cùng được đưa ra trên http://www.howtocreate.co.uk/tutorials/javascript/browserwindow cũng không hoạt động ở chế độ Quirks. Dễ tìm hơn tôi nghĩ, đây dường như là giải pháp (được trích xuất từ ​​mã jquery mới nhất):

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

chỉ cần thay thế Width cho "Height" để có được Chiều cao.

Đây là một giải pháp trình duyệt chéo:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Bạn nên sử dụng getBoundingClientRectvì nó thường hoạt động trên nhiều trình duyệt và cung cấp cho bạn độ chính xác của pixel phụ trên hình chữ nhật giới hạn.

elem.getBoundingClientRect()

Nhận kích thước tài liệu mà không cần jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

Và sử dụng cái này nếu bạn cần Kích thước màn hình

screen.width
screen.height

Bạn cũng có thể thử:

document.body.offsetHeight
document.body.offsetWidth

Điều này sẽ hoạt động cho tất cả các trình duyệt / thiết bị:

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

Nếu bạn muốn lấy toàn bộ chiều rộng của trang, bao gồm cả phần tràn, hãy sử dụng document.body.scrollWidth.

Làm thế nào để tìm ra chiều rộng và chiều cao của tài liệu rất dễ dàng?

trong HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

trong javascript

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

Bạn có thể cập nhật điều này vào mọi sự kiện thay đổi kích thước cửa sổ, nếu cần.

windowlà toàn bộ cửa sổ ứng dụng của trình duyệt. documentlà trang web được hiển thị thực sự được tải.

window.innerWidthvà window.innerHeightsẽ tính đến các thanh cuộn có thể không phải là thứ bạn muốn.

document.documentElementlà trang web đầy đủ không có thanh cuộn trên cùng. document.documentElement.clientWidthtrả về kích thước chiều rộng tài liệu mà không có thanh cuộn y. document.documentElement.clientHeighttrả về kích thước chiều cao tài liệu mà không có thanh cuộn x.