HTML DOM Element offsetTop egenskab

Definition og brug

offsetTop Egenskaben returnerer top placeringen relativt til forælderen (i pixels). Denne egenskab er skrivebeskyttet.

Returværdien inkluderer:

  • Elementets top placering og margin
  • Fars top indrykning, rullemenuer og kanter

Se også:CSS ramme model tutorial

offsetParent

Alle blokk elementer rapporterer afstande relativt til offset-forælderen:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Offset-forælder er den nærmeste forælder med en ikke-statisk position.

Hvis der ikke findes en offset-forælder, er afstanden relativ til dokumentets正文。

Se også:

offsetLeft egenskab

offsetWidth egenskab

offsetHeight egenskab

offsetParent-egenskab

clientTop-egenskab

clientLeft-egenskab

clientWidth-egenskab

clientHeight-egenskab

Eksempel

Eksempel 1

Få offsetTop-positionen for "myDIV":

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

Prøv det selv

Eksempel 2

Få positionen for "myDIV":

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

Prøv det selv

Eksempel 3

Opret en fastsat navigationsfelt:

// Få navigationsfeltet
const navbar = document.getElementById("navbar");
// Få navigationsfeltets afstand
const sticky = navbar.offsetTop;
// Når du når den rullende position, tilføj sticky-klassen til navigationsfeltet. Fjern sticky-klassen, når du forlader rullende position.
function myFunction() {
  hvis (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Prøv det selv

Syntaks

Retur topplacering: top offset

element.offsetTop

Returværdi

Type Beskrivelse
Nummer Elementets topplacering, målt i pixels.

Browserstøtte

Alle browsere understøtter element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support