บางครั้งในโครงการคุณใช้ JS เพื่อรับตำแหน่งองค์ประกอบเพื่อค้นหาองค์ประกอบ ก่อนอื่นให้ใช้รูปภาพเพื่ออธิบายความสัมพันธ์ระหว่าง Scrollwidth, ClientWidth และ OffsetWidth
การแนะนำสั้น ๆ เกี่ยวกับ JS ที่ได้รับความกว้างและความสูงต่าง ๆ :
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 สัมพันธ์กับพิกัดแนวนอนของเอกสาร + ปริมาณการเลื่อนในทิศทางแนวตั้ง
ส่วนใหญ่หมายถึง IE และความแตกต่างใน 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)
OffsetWidth (Width+Padding+Border)
สมมติว่า OBJ เป็นตัวควบคุม HTML
obj.offsettop หมายถึงตำแหน่งจำนวนเต็ม, หน่วยพิกเซลจาก obj ถึงการควบคุมส่วนบนหรือบน
OBJ.OffsetLeft หมายถึงตำแหน่งจำนวนเต็มหน่วยพิกเซลจาก OBJ ไปทางซ้ายหรือด้านบนควบคุม
obj.offsetWidth หมายถึงความกว้างจำนวนเต็มและพิกเซลหน่วยของการควบคุม OBJ ได้รับความกว้างของเนื้อหาที่มองเห็นได้ของวัตถุยกเว้นแถบเลื่อนและเส้นขอบ;
OBJ.OffSetheight หมายถึงความสูง, จำนวนเต็ม, พิกเซลหน่วยของการควบคุม OBJ
ความแตกต่างระหว่าง OffsetWidth และ style.width
1. Offsettop ส่งคืนตัวเลขในขณะที่ style.top ส่งคืนสตริงซึ่งยังมีหน่วย: px นอกเหนือจากตัวเลข
2. Offsettop เป็นแบบอ่านอย่างเดียวในขณะที่ style.top คือการอ่าน-เขียน
3. หากไม่มีการระบุสไตล์ด้านบนสำหรับองค์ประกอบ HTML ดังนั้น Style.top จะส่งคืนสตริงเปล่า