HTML DOM Element ตัวแปร offsetTop

การกำหนดและการใช้งาน

offsetTop ตัวแปรกลับมารายงานตำแหน่งด้านบนเรlatives กับพ่อของออฟเซ็ท (ในพิกเซล) ตัวแปรนี้เป็นตัวแปรที่แสดงและไม่สามารถเปลี่ยนแปลงได้

ค่าที่กลับมารวมถึง：

  • ตำแหน่งด้านบนและมาริดจันทร์ขององค์ประกอบ
  • เมื่อของพ่อของออฟเซ็ท ด้านบนของปริมาณด้านใน ตราบและขอบเขต

อ่านเพิ่มเติม：ตัวเรียกเรื่อง CSS รูปแบบแบนเนอร์

offsetParent

ทุกองค์ประกอบแบบบล็อคทุกตัวรายงานมาตราการออฟเซ็ทเรlatives กับพ่อของออฟเซ็ท

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

พ่อของออฟเซ็ทคือบุตรที่ใกล้ที่สุดที่มีตำแหน่งที่ไม่เป็นสถานีตั้ง

ถ้าไม่มีพ่อของออฟเซ็ท มาตราการออฟเซ็ทคือเรlatives กับบทความหลักของเอกสาร

อ่านเพิ่มเติม：

offsetLeft รายละเอียด

offsetWidth รายละเอียด

offsetHeight รายละเอียด

แคริดิทธ์ offsetParent

แคริดิทธ์ clientTop

แคริดิทธ์ clientLeft

แคริดิทธ์ clientWidth

แคริดิทธ์ clientHeight

ตัวอย่าง

ตัวอย่าง 1

ดึงตำแหน่ง offsetTop ของ "myDIV"

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ดึงตำแหน่ง "myDIV"

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

ทดลองด้วยตัวเอง

ตัวอย่าง 3

สร้างแถวนำเสนอที่ติดตั้ง

// ของแถวนำเสนอ
const navbar = document.getElementById("navbar");
// ของคำนำออกตำแหน่งของแถวนำเสนอ
const sticky = navbar.offsetTop;
// ให้คุณถึงตำแหน่งการเลื่อนเพลาเว็บ จะเพิ่มชั้น sticky ให้กับแถวนำเสนอ ถ้าหากไม่ถึงตำแหน่งการเลื่อนเพลาเว็บ จะลบชั้น sticky
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

ทดลองด้วยตัวเอง

วลี

คืนค่าตำแหน่ง top offset ที่ตั้ง

element.offsetTop

ค่าที่คืนค่า

ชนิด การอธิบาย
ตัวเลข ตำแหน่งด้านบนขององค์ประกอบ นับด้วยพิกัดพิเศษ

สนับสนุนเบราซเซอร์

ทุกเบราซเซอร์เกิดการสนับสนุน element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน