วิธีรับความสูงและความกว้างของเอกสารโดยไม่ใช้ jquery

วิธีรับความสูงและความกว้างของเอกสารอย่างแท้จริง จาวาสคริปต์ เช่นโดยไม่ต้องใช้ jquery.
ฉันรู้เกี่ยวกับ$(document).height()และ$(document).width()แต่ฉันต้องการทำสิ่งนี้ในจาวาสคริปต์.

ฉันหมายถึงความสูงและความกว้างของหน้า

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

ตรวจสอบ: บทความนี้เพื่อคำอธิบายที่ดีขึ้น

แม้แต่ตัวอย่างสุดท้ายที่ให้ไว้ในhttp://www.howtocreate.co.uk/tutorials/javascript/browserwindowก็ไม่ทำงานในโหมด Quirks หาง่ายกว่าที่คิดดูเหมือนจะเป็นวิธีแก้ปัญหา (แยกจากรหัส jquery ล่าสุด):

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

เพียงแค่แทนที่ Width สำหรับ "Height" เพื่อรับ Height

นี่คือโซลูชันข้ามเบราว์เซอร์:

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

คุณควรใช้getBoundingClientRectตามปกติงานข้ามเบราว์เซอร์และให้ความแม่นยำของพิกเซลย่อยบนกรอบสี่เหลี่ยม

elem.getBoundingClientRect()

รับขนาดเอกสารโดยไม่ต้องใช้ jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

และใช้สิ่งนี้หากคุณต้องการขนาดหน้าจอ

screen.width
screen.height

คุณสามารถลอง:

document.body.offsetHeight
document.body.offsetWidth

สิ่งนี้ควรใช้ได้กับเบราว์เซอร์ / อุปกรณ์ทั้งหมด:

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

    return actualWidth;
}

document.body.scrollWidthหากคุณต้องการที่จะได้รับเต็มความกว้างของหน้ารวมทั้งน้ำล้นใช้

จะค้นหาความกว้างและความสูงของเอกสารได้อย่างไร?

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

ในจาวาสคริปต์

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

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

คุณสามารถอัปเดตสิ่งนี้ในทุกเหตุการณ์การปรับขนาดหน้าต่างหากจำเป็น

windowคือหน้าต่างแอปพลิเคชันของเบราว์เซอร์ทั้งหมด documentคือหน้าเว็บที่แสดงว่าโหลดจริง

window.innerWidthและwindow.innerHeightจะคำนึงถึงแถบเลื่อนซึ่งอาจไม่ใช่สิ่งที่คุณต้องการ

document.documentElementคือหน้าเว็บแบบเต็มโดยไม่มีแถบเลื่อนด้านบน document.documentElement.clientWidthส่งคืนขนาดความกว้างของเอกสารโดยไม่มีแถบเลื่อน y document.documentElement.clientHeightส่งคืนขนาดความสูงของเอกสารโดยไม่มีแถบเลื่อน x