ความสูงและความกว้างเป็นขนาดที่สำคัญที่สุดในการออกแบบเค้าโครงของหน้าเว็บ
'ความสูง' ระบุการวัดความยาวของวัตถุจากบนลงล่าง ในขณะที่ 'ความกว้าง' ระบุความกว้างของวัตถุจากด้านหนึ่งไปอีกด้านหนึ่ง ปัจจัยเหล่านี้ช่วยในการปรับการจัดสรรวัตถุในหน้าต่าง ในจาวาสคริปต์ “ ความสูง ' และ ' ความกว้าง ” คุณสมบัติถูกจัดประเภทเพิ่มเติมอีกสองประเภทคือ “ภายใน” คือ “ความสูงด้านใน/ความกว้างด้านใน” และ “ด้านนอก” คือ “ความสูงด้านนอก/ความกว้างด้านนอก” ตามลำดับ
บทความนี้อธิบายรายละเอียดเกี่ยวกับวัตถุประสงค์และการทำงานของคุณสมบัติ Window “innerHeight” ใน JavaScript
คุณสมบัติ Window “innerHeight” ทำอะไรใน JavaScript?
“ ความสูงด้านใน คุณสมบัติ ” เชื่อมโยงกับวัตถุ “หน้าต่าง” ที่ดึงความสูงของวิวพอร์ตของหน้าต่างเบราว์เซอร์ ไม่รวมแถบตำแหน่ง แถบเครื่องมือ แถบเมนู และอื่นๆ นอกจากนี้ยังมีความสูงของแถบเลื่อนแนวนอนหากรวมอยู่ด้วย ค่าที่ส่งคืนของคุณสมบัตินี้นำมาจากหน้าต่าง 'เลย์เอาต์วิวพอร์ต' นั่นคือพื้นที่ที่แสดงเนื้อหาของหน้าเว็บ
ไวยากรณ์พื้นฐาน
window.innerHeight หรือ innerHeight
ตามไวยากรณ์ข้างต้น ' ความสูงด้านใน คุณสมบัติ ” สามารถนำไปใช้โดยตรงหรือใช้วัตถุ 'หน้าต่าง' ได้อย่างง่ายดาย
ลองใช้คุณสมบัติที่กำหนดไว้ข้างต้นในทางปฏิบัติด้วยความช่วยเหลือของไวยากรณ์พื้นฐาน
ตัวอย่างที่ 1: การใช้คุณสมบัติ “innerHeight” ของหน้าต่างเพื่อคืนค่าความสูงของวิวพอร์ตของหน้าต่างเบราว์เซอร์
ตัวอย่างนี้ใช้คุณสมบัติ 'innerHeight' กับวัตถุ 'หน้าต่าง' เพื่อดึงความสูงของวิวพอร์ตของหน้าต่างเบราว์เซอร์
รหัส HTML
ขั้นแรก ให้ดูรหัสที่ระบุด้านล่าง:
< ชั่วโมง2 > หน้าต่าง innerHeight คุณสมบัติ ชั่วโมง2 >< ปุ่ม เมื่อคลิก = 'jsFunc()' > รับความสูง ปุ่ม >
< หน้า รหัส = 'สำหรับ' > หน้า >
ในบรรทัดรหัสด้านบน:
- “ ” แท็กกำหนดหัวข้อย่อยระดับ 2
- “ <ปุ่ม> แท็ก ” แสดงถึงปุ่มที่มีเหตุการณ์ “onclick” เพื่อเรียกใช้ฟังก์ชัน “jsFunc()” เมื่อเหตุการณ์ถูกทริกเกอร์
- “ แท็ก ' เพิ่มย่อหน้าว่างด้วยรหัส 'para' ที่กำหนดเพื่อแสดงค่าที่ส่งคืนของคุณสมบัติ 'innerHeight' ที่ใช้
รหัสจาวาสคริปต์
ตอนนี้ดำเนินการตามรหัสที่ระบุด้านล่าง:
< สคริปต์ >การทำงาน jsFunc ( ) {
อนุญาต h = window.innerHeight;
document.getElementById ( 'สำหรับ' ) .innerHTML = 'innerHeight ของหน้าต่าง: ' + ชั่วโมง;
}
สคริปต์ >
ในบรรทัดโค้ดด้านบน:
- ขั้นแรก กำหนดฟังก์ชันชื่อ “ jsFunc() '.
- ในคำจำกัดความ ตัวแปร “h” จะใช้ “ ความสูงด้านใน ” คุณสมบัติโดยใช้วัตถุ “หน้าต่าง”
- หลังจากนั้นให้ใช้ “ getElementById() ” วิธีการรับย่อหน้าว่างที่เพิ่มเข้ามาโดยใช้ id “para” และแสดงความสูงภายในของหน้าต่างเบราว์เซอร์ปัจจุบันในนั้น
เอาต์พุต
ดังที่แสดงในเอาต์พุตด้านบน หน้าต่างเบราว์เซอร์ปัจจุบันแสดงความสูงของวิวพอร์ต (ความสูงด้านใน) นั่นคือ “ 599px ” เมื่อคลิกปุ่ม
ตัวอย่างที่ 2: การใช้หน้าต่างรวมคุณสมบัติ “innerHeight” และ “innerWidth”
คุณสมบัติ 'innerHeight' สามารถนำไปใช้ควบคู่ไปกับคุณสมบัติมิติอื่นๆ เช่น 'innerWidth', 'outerWidth', 'outerHeight' เป็นต้น ในสถานการณ์สมมตินี้ จะใช้ควบคู่ไปกับ ' ความกว้างด้านใน ' คุณสมบัติ.
รหัส HTML
มาดูภาพรวมของโค้ด HTML ที่แก้ไข:
< ชั่วโมง2 > หน้าต่าง innerHeight และ innerWidth คุณสมบัติ ชั่วโมง2 >< ปุ่ม เมื่อคลิก = 'jsFunc()' > รับความสูงและความกว้าง ปุ่ม >
< หน้า รหัส = 'สำหรับ' > หน้า >
ที่นี่ เนื้อหาขององค์ประกอบ “