ฉันมักจะพบว่าเมื่อเขียน JavaScript คุณต้องใช้ความสูงและความกว้างของหน้าเว็บเบราว์เซอร์หรือหน้าจอเพื่อแก้ปัญหาการวางตำแหน่งเค้าโครง คุณมักจะลืมมันก่อนและหลังการใช้งานหรือค้นหาออนไลน์และสรุปด้วยตัวคุณเองเพื่อให้สะดวกในการใช้งานอีกครั้งประหยัดเวลาและความพยายาม
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: 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 = ความสูง
สรุป: มีหลายสิ่งมากมายเกี่ยวกับความสูงและความกว้าง ฉันไม่เข้าใจเฉพาะบางอย่างด้วยตัวเอง หลังจากทดลองกับพวกเขาแล้วบางคนก็มีค่าเท่ากันดังนั้นจึงสับสนมากและสามารถพึ่งพาสถานการณ์ได้เท่านั้น