Vad är HTML DOM Element offsetTop Property i JavaScript

Vad Ar Html Dom Element Offsettop Property I Javascript



HTML DOM-elementet ' offsetTopp ” egenskapen utvärderar toppositionen för det angivna HTML-elementet som motsvarar dokumentet. Det är en speciell HTML DOM-skrivskyddad egenskap som ofta kan användas med andra JavaScript-offsetegenskaper.

Den här texten utvecklar hur egenskapen 'offsetTop' fungerar i JavaScript.

Hur fungerar HTML DOM 'offsetTop'-egendom i JavaScript?

den ' offsetTopp Egenskapen ' fungerar på HTML-elementen och returnerar 'marginalen', den översta 'utfyllnaden', 'kanten' och 'rullningslisten' för det överordnade elementet också.





Syntax



element. offsetTopp

I den här syntaxen ' element ” anger det specifika HTML-elementets översta position i förhållande till visningsporten (ett tomt område där webbsidans innehåll visas).



Notera: Det returnerade värdet inkluderar följande:



  • topposition och elementets marginal.
  • övre kant, rullningslist och utfyllnad av föräldern.

Låt oss använda ovanstående syntax praktiskt taget.

Exempel: Använda egenskapen 'offsetTop' för att utvärdera HTML-topposition

Detta exempel använder ' offsetTopp '-egenskap för att beräkna toppositionen för det specifika HTML-elementet, dvs. '

” inklusive dess marginal i pixlar.



HTML-kod

Gå först igenom följande HTML-kod:

< div id = 'Div1' stil = 'top:20px; position: relative;margin:15px;border:3px solid blueviolet;text-align:center; padding:10px;' >

< b > Detaljer av detta div är : b >< br >

topp : 20px < br >

placera : relativ < br >

text - justera : Centrum < br >

marginal : 15 px < br >

gräns : 3 px < br >

div >< br >

< knappen när du klickar = 'jsFunc()' > Klicka på det knapp >

< p id = 'för' > sid >

I ovanstående kod:

  • den '
    element skapas med det angivna ID:t 'Div1' bredvid ' stil ” egenskap som utför den angivna stylingen.
  • Därefter specificerar huvuddelen av '
    ' den angivna informationen.
  • Skapa sedan en knapp med hjälp av ' ' tagg som har en associerad ' onclick ' händelse för att utföra funktionen ' jsFunc() ” när knappen klickar.
  • Lägg slutligen till ett tomt stycke via '

    ”-taggen för att visa den beräknade toppositionen för elementet “

    ”.

JavaScript-kod

Tänk nu på den givna JavaScript-koden:

< manus >

funktion jsFunc ( ) {

var elmnt = dokumentera. getElementById ( 'Div1' ) ;

var txt = 'Beräknad OffsetTop är: ' + elmnt. offsetTopp + 'px
' ;

dokumentera. getElementById ( 'för' ) . innerHTML = Text ;

}

manus >

I ovanstående kodrader:

  • Funktionen är definierad med namnet ' jsFunc() ”.
  • I sin definition är variabeln ' elmnt ' deklareras med ' var ' nyckelord som använder ' getElementById() '-metoden för att komma åt den inkluderade 'div' med dess id ' Div1 ”.
  • Efter det, använd ' offsetTopp '-egenskapen i variabeln 'txt' för att beräkna topppositionen för den hämtade 'div' i pixlar.
  • Slutligen tillämpas 'getElementById()' igen för att närma sig det tillagda tomma stycket och lägga till det beräknade toppositionsvärdet för elementet '
    ' i stycket via ' innerHTML ' fast egendom.

Produktion

I detta resultat kan det observeras att toppositionen för den givna div (inklusive marginal), dvs. 35 pixlar ” beräknas i enlighet med den angivna anteckningen (i början av bloggen) och visas när du klickar på knappen.

Slutsats

JavaScript tillhandahåller ' offsetTopp ”-egenskapen för att beräkna den översta positionen för HTML-elementet i förhållande till visningsporten. Den returnerar den beräknade toppositionen för ett element som ett heltalsvärde i ' pixlar ”. Denna uppskrivning demonstrerade målet, användningen och implementeringen av HTML DOM Element 'offsetTop'-egenskapen i JavaScript.

Övrig

Kategori

Populära Inlägg

Hur man installerar rätt chipset-drivrutin/firmware för WiFi/Ethernet-enheter för att fungera på Fedora 39+

Hur man använder Chmod +X för att göra en fil körbar i Linux

Hur man byter till kreativt läge i Minecraft

Hur använder man formatkommandon för att ändra utdatavy i PowerShell?

LWC – ConnectedCallback()

Förstå Linux-filbehörigheter: Hur du säkrar ditt system

De tre bästa sätten att fixa problem med Wi-Fi-anslutning på Windows 10

Hur man vänder en vektor i MATLAB

Numpy Fromstring-metod

Hur du delar din skärm på Discord Mobile [Guide]

Vad är Headless WordPress och hur man kommer igång

Hur får man ID för den klickade knappen med JavaScript/jQuery?

Vad är Shebang: Bash Script Header on First Line?

Hur läser man en tabell i MATLAB?

Hur man får Git att klona in i aktuell katalog

Kan Discord-konton hackas? Hur man förblir säker!

Windows 10 Systemkrav och kompatibilitetstest

Hur man aktiverar 2FA med Authenticator-appen – Roblox

Discord-installationen har misslyckats i Windows 10 (5 lösningar att fixa)

Vad är skillnaden mellan AWS Aurora och MySQL?