ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientwidth
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientheight
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetWidth (รวมถึงความกว้างของเส้นขอบ)
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetheight (รวมถึงความกว้างของเส้นขอบ)
ความกว้างข้อความแบบเต็มของหน้าเว็บ: document.body.scrollwidth
ข้อความเต็มของหน้าเว็บ: document.body.scrollheight
หน้าเว็บจะเปิดตัวในระดับสูง: document.body.scrolltop
ด้านซ้ายของหน้าเว็บที่กำลังเปิดตัว: document.body.scrollleft
ในส่วนหลักของหน้าเว็บ: window.screentop
ด้านซ้ายของข้อความหลักของหน้าเว็บ: window.screenleft
ความละเอียดหน้าจอสูง: window.screen.height
ความกว้างของความละเอียดหน้าจอ: window.screen.width
หน้าจอความสูงของพื้นที่ทำงาน: window.screen.availheight
หน้าจอความกว้างของพื้นที่ทำงาน: window.screen.availwidth
การวางตำแหน่งที่แม่นยำ HTML: Scrollleft, Scrollwidth, ClientWidth, OffsetWidth
Scrollheight: ได้รับความสูงของวัตถุ
Scrollleft: ตั้งค่าหรือรับระยะห่างระหว่างขอบเขตซ้ายของวัตถุและปลายด้านซ้ายสุดของเนื้อหาที่มองเห็นได้ในปัจจุบันในหน้าต่าง
Scrolltop: ตั้งค่าหรือรับระยะห่างระหว่างด้านบนของวัตถุและด้านบนของเนื้อหาที่มองเห็นได้ในหน้าต่าง
Scrollwidth: รับความกว้างการเลื่อนของวัตถุ
Offsetheight: ได้รับความสูงของวัตถุที่สัมพันธ์กับเลย์เอาต์หรือพิกัดหลักที่ระบุโดยคุณสมบัติ OffsetParent ของพิกัดหลัก
Offsetleft: ได้รับตำแหน่งซ้ายที่คำนวณได้ของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติออฟเซ็ต PREAT
OFFSETTOP: รับตำแหน่งด้านบนที่คำนวณได้ของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติ Oftsettop
Event.Clientx พิกัดแนวนอนที่สัมพันธ์กับเอกสาร
Event.Clienty Drientical Coordinates เทียบกับเอกสาร
Event.offsetx พิกัดแนวนอนที่สัมพันธ์กับคอนเทนเนอร์
เหตุการณ์พิกัดแนวตั้งที่มีความสัมพันธ์กับคอนเทนเนอร์
document.documentelement.scrolltop ค่าของการเลื่อนในแนวตั้ง
event.clientx + document.documentelement.scrolltop สัมพันธ์กับพิกัดแนวนอนของเอกสาร + ปริมาณการเลื่อนในทิศทางแนวตั้ง
คือความแตกต่างของ Firefox มีดังนี้ :
IE6.0, ff1.06+:
clientWidth = width + padding
clientHeight = ความสูง + ช่องว่างภายใน
OffsetWidth = Width + Padding + Border
Offsetheight = ความสูง + ช่องว่าง + เส้นขอบ
IE5.0/5.5 :
clientWidth = ความกว้าง - ชายแดน
clientHeight = ความสูง - ชายแดน
OffsetWidth = ความกว้าง
Offsetheight = ความสูง
(ควรมีการกล่าวถึงว่าแอตทริบิวต์มาร์จิ้นใน CSS ไม่มีส่วนเกี่ยวข้องกับ ClientWidth, OffsetWidth, ClientHeight และ Offsetheight)
-
ไฮไลท์ทางเทคนิค
รหัสในส่วนนี้ส่วนใหญ่ใช้คุณสมบัติบางอย่างของวัตถุเอกสารเกี่ยวกับหน้าต่าง ฟังก์ชั่นหลักและการใช้คุณสมบัติเหล่านี้มีดังนี้
ในการรับขนาดหน้าต่างจำเป็นต้องใช้คุณสมบัติและวิธีการที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกัน: ในการตรวจจับขนาดที่แท้จริงของหน้าต่างคุณต้องใช้แอตทริบิวต์หน้าต่างภายใต้ NetScape; เพื่อตรวจจับร่างกายใน IE; ในการรับขนาดหน้าต่างคุณต้องใส่ใจกับขนาดขององค์ประกอบรูทไม่ใช่องค์ประกอบ
คุณสมบัติ InnerWidth ของวัตถุหน้าต่างมีความกว้างภายในของหน้าต่างปัจจุบัน คุณสมบัติ innerHeight ของวัตถุหน้าต่างมีความสูงภายในของหน้าต่างปัจจุบัน
แอตทริบิวต์ Body ของวัตถุเอกสารสอดคล้องกับแท็กของเอกสาร HTML คุณสมบัติ DocumentElement ของวัตถุเอกสารแสดงถึงโหนดรูทของเอกสาร HTML
document.body.clientheight แสดงถึงความสูงปัจจุบันของหน้าต่างที่เอกสาร HTML อยู่ document.body.clientwidth แสดงถึงความกว้างปัจจุบันของหน้าต่างที่เอกสาร HTML อยู่
การวิจัยเล็กน้อยเกี่ยวกับการรับหน้าต่างที่มองเห็นได้ในเบราว์เซอร์ต่างๆ
ในการทดสอบในพื้นที่ของฉัน: สามารถใช้ภายใต้ IE, Firefox และ Opera
document.body.clientwidth
document.body.clientheight สามารถรับได้ง่ายและสะดวกมาก
ในโครงการของ บริษัท : ยังคงใช้โอเปร่า
document.body.clientwidth
document.body.clientheight
แต่เช่นการใช้ Firefox
document.documentelement.clientwidth
document.documentelement.clientheight
ปรากฎว่ามาตรฐาน W3C ทำให้เกิดปัญหา http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
หากคุณเพิ่มบรรทัดนี้ลงในหน้า
ใน IE: document.body.clientwidth ==> ความกว้างของวัตถุร่างกาย
document.body.clientheight ==> ความสูงของวัตถุร่างกาย
Document.DocumentElement.ClientWidth ==> ความกว้างของพื้นที่ที่มองเห็นได้
document.documentelement.clientheight ==> ความสูงของพื้นที่ที่มองเห็นได้
ใน firefox: document.body.clientwidth ==> ความกว้างของวัตถุร่างกาย
document.body.clientheight ==> ความสูงของวัตถุร่างกาย
Document.DocumentElement.ClientWidth ==> ความกว้างของพื้นที่ที่มองเห็นได้
document.documentelement.clientheight ==> ความสูงของพื้นที่ที่มองเห็นได้?
ใน Opera: document.body.clientwidth ==> ความกว้างของพื้นที่ที่มองเห็นได้
document.body.clientheight ==> ความสูงของพื้นที่ที่มองเห็นได้
Document.DocumentElement.ClientWidth ==> ความกว้างของวัตถุหน้า (เช่นความกว้างของวัตถุร่างกายบวกความกว้างของระยะขอบ) เอกสาร. documentElement.ClientHeight ==> ความสูงของวัตถุหน้า (เช่นความสูงของวัตถุร่างกายบวกความสูงระยะขอบ)
หากไม่มีมาตรฐานสำหรับ W3C
จากนั้นคือคือ: document.documentelement.clientWidth ==> 0
document.documentelement.clientheight ==> 0
firefox คือ: document.documentelement.clientWidth ==> ความกว้างของวัตถุหน้า (เช่นความกว้างของวัตถุร่างกายบวกความกว้างมาร์จิ้น)
document.documentelement.clientheight ==> ความสูงของวัตถุหน้า (เช่นความสูงของวัตถุในร่างกายบวกความสูงระยะขอบ)
โอเปร่าคือ: document.documentelement.clientWidth ==> ความกว้างของวัตถุหน้า (เช่นความกว้างของวัตถุร่างกายบวกความกว้างมาร์จิ้น)
document.documentelement.clientheight ==> ความสูงของวัตถุหน้า (เช่นความสูงของวัตถุในร่างกายบวกความสูงระยะขอบ)
มันเป็นเรื่องยุ่งยากจริงๆ ในความเป็นจริงจากมุมมองของการออกแบบและพัฒนาส่วนหน้าจะดีกว่าที่จะมีวัตถุและวิธีการน้อยกว่าที่จะไม่ใช้มาตรฐานล่าสุด แต่ถ้าคุณไม่สามารถติดตามเทรนด์ได้คุณจะไม่เป็นนักออกแบบอาวุโสดังนั้นเราจึงต้องเข้าใจและเชี่ยวชาญความรู้นี้