Ιδιότητα offsetTop του DOM Element HTML

Ορισμός και χρήση

offsetTop Η ιδιότητα επιστρέφει τη θέση της κορμού σχετικά με τον γονέα (με πιξέλους). Αυτή η ιδιότητα είναι μονόδρομη.

Η επιστροφή περιλαμβάνει:

  • Θέση κορμού του στοιχείου και τα περιθώρια
  • Περιθώριο κορμού του γονέα, κύλινδροι και περιφράξεις

Αναφοράς:Εκμάθηση του μοντέλου κουτίου CSS

offsetParent

Όλα τα στοιχεία block report την αποκλίωση σχετικά με τον αποκλίνοντα γονέα:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Αποκλίνοντας γονέας αναφέρεται στον πλησιέστερο προγονό με μη στατική θέση.

Αν δεν υπάρχει αποκλίνοντας γονέας, η αποκλίωση είναι σχετική με το κείμενο του εγγράφου.

Επιπλέον αναφοράς:

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

Δημιουργία σταθερού πλοηγού:

// Λήψη του πλοηγού navbar
const navbar = document.getElementById("navbar");
// Λήψη της θέσης του πλοηγού navbar
const sticky = navbar.offsetTop;
// Όταν φτάσετε στη θέση κύλισης, προσθέστε τη κλάση sticky στη σειρά πλοήγησης. Αφαιρέστε τη κλάση sticky όταν αποχωρήσετε από τη θέση κύλισης.
function myFunction() {
  Αν (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Δοκιμάστε το προσωπικά

Γλώσσα

Επιστροφή της θέσης top offset:

element.offsetTop

Αποτελεσματική τιμή

Τύπος Περιγραφή
Αριθμός Η θέση του στοιχείου στην κορυφή, μείτρας pixels.

Υποστήριξη περιηγητή

Όλοι οι περιηγητές υποστηρίζουν element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη