บทความนี้อธิบายอย่างละเอียดเกี่ยวกับการทำงานของคุณสมบัติ “offsetTop” ใน JavaScript
คุณสมบัติ HTML DOM “offsetTop” ทำงานใน JavaScript อย่างไร
“ offsetTop คุณสมบัติ ” ทำงานบนองค์ประกอบ HTML และส่งกลับ 'ระยะขอบ' ด้านบน 'ช่องว่างภายใน' 'เส้นขอบ' และ 'แถบเลื่อน' ขององค์ประกอบหลักเช่นกัน
ไวยากรณ์
องค์ประกอบ. offsetTop
ในไวยากรณ์นี้ “ องค์ประกอบ ” หมายถึงตำแหน่งบนสุดขององค์ประกอบ HTML เฉพาะที่เกี่ยวข้องกับวิวพอร์ต (พื้นที่ว่างที่แสดงเนื้อหาของหน้าเว็บ)
บันทึก: ค่าที่ส่งคืนมีดังต่อไปนี้:
- ตำแหน่งบนสุด และระยะขอบขององค์ประกอบ
- เส้นขอบด้านบน แถบเลื่อน และช่องว่างภายในของพาเรนต์
ลองใช้ไวยากรณ์ข้างต้นในทางปฏิบัติ
ตัวอย่าง: การใช้คุณสมบัติ “offsetTop” เพื่อประเมินตำแหน่งบนสุดของ HTML
ตัวอย่างนี้ใช้ ' offsetTop คุณสมบัติ ” เพื่อคำนวณตำแหน่งบนสุดขององค์ประกอบ HTML เฉพาะเช่น “ ขั้นแรก ให้อ่านโค้ด HTML ต่อไปนี้: ในรหัสด้านบน: ตอนนี้ให้พิจารณารหัส JavaScript ที่กำหนด: ในบรรทัดรหัสด้านบน: เอาต์พุต ในผลลัพธ์นี้ สังเกตได้ว่าตำแหน่งบนสุดของ div ที่กำหนด (รวมถึงมาร์จิ้น) เช่น “ 35พิกเซล ” คำนวณตามบันทึกที่ระบุ (ที่จุดเริ่มต้นของบล็อก) และแสดงเมื่อคลิกปุ่ม JavaScript ให้ “ offsetTop คุณสมบัติ ” เพื่อคำนวณตำแหน่งบนสุดขององค์ประกอบ HTML ที่สัมพันธ์กับวิวพอร์ต จะส่งกลับตำแหน่งบนสุดที่คำนวณได้ขององค์ประกอบเป็นค่าจำนวนเต็มใน “ พิกเซล '. บทความนี้แสดงวัตถุประสงค์ การใช้งาน และการนำคุณสมบัติ HTML DOM Element “offsetTop” ไปใช้งานใน JavaScript
รหัส HTML
< ข > รายละเอียดของ นี้ div คือ : ข >< br >
สูงสุด : 20px < br >
ตำแหน่ง : ญาติ < br >
ข้อความ - จัด : ศูนย์ < br >
ขอบ : 15พิกเซล < br >
ชายแดน : 3px < br >
แผนก >< br >
< ปุ่มบนคลิก = 'jsFunc()' > คลิกเลย ปุ่ม >
< รหัสพี = 'สำหรับ' > หน้า >
รหัสจาวาสคริปต์
ฟังก์ชัน jsFunc ( ) {
เป็นเอลม์ = เอกสาร. getElementById ( 'ดิวิชั่น 1' ) ;
โดยที่ txt = 'OffsetTop ที่คำนวณได้คือ: ' + เอล์ม offsetTop + 'พิกเซล
' ;
เอกสาร. getElementById ( 'สำหรับ' ) . HTML ภายใน = txt ;
}
สคริปต์ >
บทสรุป