ตัวอย่าง
ได้ความสูงของหน้าต่างและความกว้าง: (NOT including toolbars/scrollbars) :
var w = window.innerWidth;
var h = window.innerHeight;
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
สถานที่ให้บริการ innerWidth ส่งกลับความกว้างด้านในของพื้นที่เนื้อหาของหน้าต่าง
สถานที่ให้บริการ innerHeight ผลตอบแทนที่สูงภายในของพื้นที่เนื้อหาของหน้าต่าง
คุณสมบัติเหล่านี้จะอ่านอย่างเดียว
เคล็ดลับ: ใช้ outerWidth และ outerHeight คุณสมบัติที่จะได้รับความกว้าง / ความสูงที่มีแถบเครื่องมือ / เลื่อน
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| innerWidth | 1.0 | 9.0 | 1.0 | 3.0 | 9.0 |
| innerHeight | 1.0 | 9.0 | 1.0 | 3.0 | 9.0 |
Note: สำหรับ IE8 และก่อนหน้านี้คุณสามารถใช้ clientWidth และ clientHeight คุณสมบัติ (See "More Examples" below)
วากยสัมพันธ์
window.innerWidth
window.innerHeightรายละเอียดทางเทคนิค
| กลับค่า: | หมายเลขที่เป็นตัวแทนของความกว้างภายในและ / หรือความสูงภายในของพื้นที่เนื้อหาหน้าต่างเบราว์เซอร์ของพิกเซล |
|---|
ตัวอย่างอื่น ๆ
ตัวอย่าง
วิธีการแก้ปัญหาเบราว์เซอร์ (ใช้ clientWidth และ clientHeight สำหรับ IE8 และก่อนหน้า):
var w = window.innerWidth
|| document.documentElement.clientWidth
||
document.body.clientWidth;
var h = window.innerHeight
||
document.documentElement.clientHeight
|| document.body.clientHeight; ลองตัวเอง» ตัวอย่าง
การสาธิตการ innerWidth, innerHeight, outerWidth และ outerHeight ในตัวอย่างที่หนึ่ง:
var txt = "";
txt += "<p>innerWidth: " + window.innerWidth + "</p>";
txt +=
"<p>innerHeight: " + window.innerHeight + "</p>";
txt += "<p>outerWidth: " + window.outerWidth + "</p>";
txt += "<p>outerHeight:
" + window.outerHeight + "</p>"; ลองตัวเอง» <หน้าต่างวัตถุ