JS ได้รับการชดเชย, Offsetleft และคุณสมบัติอื่น ๆ ขององค์ประกอบ
obj.clientwidth // รับความกว้างขององค์ประกอบ
obj.clientheight // ความสูงขององค์ประกอบ
obj.offsetleft // องค์ประกอบที่สัมพันธ์กับองค์ประกอบหลักขององค์ประกอบทางซ้าย
obj.offsettop // ด้านบนขององค์ประกอบที่สัมพันธ์กับองค์ประกอบหลัก
obj.offsetWidth // ความกว้างขององค์ประกอบ
obj.offsetheight // ความสูงขององค์ประกอบ
ความแตกต่าง:
clientWidth = width + padding
clientHeight = ความสูง + ช่องว่างภายใน
OffsetWidth = Width + Padding + Border
Offsetheight = Width + Padding + Border
ออฟเซ็ตมีความกว้างชายแดนมากกว่าลูกค้า
// รับพิกัดแนวนอนขององค์ประกอบ (สัมพันธ์กับหน้าต่าง) ฟังก์ชั่น getTop (e) {var offset = e.offSettop; if (e.offsetParent! = null) ออฟเซ็ต+= getTop (e.offsetParent); return offset;} // รับพิกัดแนวนอนขององค์ประกอบ (สัมพันธ์กับหน้าต่าง) ฟังก์ชั่น getleft (e) {var offset = e.offsetleft; if (e.offsetParent! = null) ออฟเซ็ต+= getLeft (e.offsetParent); คืนชดเชย;}ฉันยังได้เขียนบทความ JS เกี่ยวกับการได้รับตำแหน่งองค์ประกอบ: JS ได้รับออฟเซ็ตต์ขององค์ประกอบ Offsetleft และคุณลักษณะอื่น ๆ เราสามารถรับตำแหน่งขององค์ประกอบที่สัมพันธ์กับหน้าต่างผ่านแอตทริบิวต์ออฟเซ็ตต์และออฟเซ็ตต์ แต่แอตทริบิวต์ออฟเซ็ตต์และออฟเซ็ตฟ์ทั้งสองอยู่ในตำแหน่งที่สัมพันธ์กับองค์ประกอบหลักและองค์ประกอบที่มักจะต้องได้รับตำแหน่งไม่ได้อยู่ในชั้นนอกสุด จากนั้นประสิทธิภาพจะกลายเป็นปัญหา
// รับพิกัดแนวนอนขององค์ประกอบ (สัมพันธ์กับหน้าต่าง) ฟังก์ชั่น getTop (e) {var offset = e.offSettop; ถ้า (e.offsetParent! = null) ออฟเซ็ต+= getTop (e.offsetParent); return} Offset = e.offsetLeft; ถ้า (e.offsetParent! = null) ออฟเซ็ต+= getLeft (e.offsetParent); return rotkset;}โชคดีที่เบราว์เซอร์มอบอินเทอร์เฟซที่สอดคล้องกันให้ฉัน วิธีนี้ปรากฏตัวครั้งแรกในเบราว์เซอร์ IE ต่อมาเบราว์เซอร์ยังสนับสนุนวิธีนี้และมันก็สมบูรณ์แบบมากขึ้น ใน IE พวกเขาสามารถได้รับคุณลักษณะด้านซ้ายด้านบนล่างและขวาขององค์ประกอบและเบราว์เซอร์ที่ทันสมัยในภายหลังสามารถได้รับความกว้างและความกว้างขององค์ประกอบ
| โครเมี่ยม | Firefox (Gecko) | Internet Explorer | โอเปร่า | ซาฟารี |
|---|---|---|---|---|
| 1.0 | 3.0 (1.9) | 4.0 | (ใช่) | 4.0 |
ควรสังเกตที่นี่ว่าด้านล่างเป็นระยะห่างระหว่างด้านล่างขององค์ประกอบและด้านบนของหน้าต่างแทนที่จะอยู่ด้านล่างของตำแหน่งใน CSS เทียบกับด้านล่างของหน้าต่าง ในทำนองเดียวกันแอตทริบิวต์ RIHGT คือระยะห่างระหว่างองค์ประกอบขวาสุดและด้านซ้ายของหน้าต่าง
var box = document.getElementById ("box"); var pos = box.getBoundingClientRect (); box.innerhtml = "top:"+pos.top+"ซ้าย:"+pos.left+"ด้านล่าง:" pos.bottom+"ขวา:"บทความต้นฉบับโปรดระบุการพิมพ์ซ้ำ: พิมพ์ซ้ำจากการพัฒนาส่วนหน้า