Ten artykuł omawia działanie właściwości „offsetTop” w JavaScript.
Jak działa właściwość HTML DOM „offsetTop” w JavaScript?
„ przesunięcie na górze ” działa na elementach HTML i zwraca również „margines”, górne „dopełnienie”, „obramowanie” i „pasek przewijania” elementu nadrzędnego.
Składnia
element. przesunięcie na górze
W tej składni „ element ” oznacza najwyższą pozycję określonego elementu HTML względem widocznego obszaru (pusty obszar, w którym wyświetlana jest zawartość strony internetowej).
Notatka: Zwracana wartość obejmuje:
- górna pozycja i margines elementu.
- górna ramka, pasek przewijania i dopełnienie elementu nadrzędnego.
Użyjmy powyższej składni praktycznie.
Przykład: zastosowanie właściwości „offsetTop” do oceny najwyższej pozycji HTML
W tym przykładzie zastosowano „ przesunięcie na górze ”, aby obliczyć najwyższą pozycję określonego elementu HTML, tj. „
Kod HTML
Najpierw przejrzyj następujący kod HTML:
< identyfikator div = „Dziel1” styl = „góra: 20 pikseli; pozycja: względna; margines: 15 pikseli; obramowanie: 3 piksele jednolity niebieski fiolet; wyrównanie tekstu: środek; dopełnienie: 10 pikseli;” >< B > Szczegóły Ten div są : B >< br >
szczyt : 20px < br >
pozycja : względny < br >
tekst - wyrównywać : Centrum < br >
margines : 15 piks < br >
granica : 3 piks < br >
dz >< br >
< przycisk po kliknięciu = 'jsFunc()' > Kliknij to przycisk >
< identyfikator p = 'Do' > P >
W powyższym kodzie:
- „
” tworzony jest element o podanym identyfikatorze „Div1” obok „ styl ” właściwość, która wykonuje określoną stylizację. - Następnie sekcja treści „” określa podane informacje.
- Następnie utwórz przycisk za pomocą „
” znacznik mający skojarzony „ na kliknięcie ” zdarzenie do wykonania funkcji „ jsFunc() ” po kliknięciu przycisku. - Na koniec dodaj pusty akapit za pomocą „ ”, aby wyświetlić obliczoną górną pozycję elementu „
”.Kod JavaScript
Rozważmy teraz podany kod JavaScript:
< scenariusz >
funkcja jsFunc ( ) {
był elemntem = dokument. getElementById ( „Dziel1” ) ;
gdzie txt = „Obliczona wartość OffsetTop to:” + wiąz. przesunięcie na górze + 'px
' ;
dokument. getElementById ( 'Do' ) . wewnętrzny HTML = tekst ;
}
scenariusz >W powyższych liniach kodu:
- Funkcja jest zdefiniowana o nazwie „ jsFunc() ”.
- W swojej definicji zmienna „ wiąz ” deklaruje się za pomocą „ był ” słowo kluczowe wykorzystujące „ getElementById() ” metoda dostępu do dołączonego „div” według jego identyfikatora „ Dział1 ”.
- Następnie zastosuj „ przesunięcie na górze ” w zmiennej „txt”, aby obliczyć najwyższą pozycję pobranego „div” w pikselach.
- Na koniec ponownie stosuje się „getElementById()”, aby zbliżyć się do dodanego pustego akapitu i dołączyć obliczoną wartość górnej pozycji elementu „” w akapicie za pomocą „ wewnętrzny HTML ' nieruchomość.
Wyjście
W wyniku tym można zauważyć, że najwyższa pozycja danego elementu div (łącznie z marginesem), tj. „ 35px ” jest obliczany zgodnie z podaną notatką (na początku bloga) i wyświetlany po kliknięciu przycisku.
Wniosek
JavaScript zapewnia „ przesunięcie na górze ”, aby obliczyć najwyższą pozycję elementu HTML względem widocznego obszaru. Zwraca obliczoną górną pozycję elementu jako wartość całkowitą w „ piksele ”. Ten artykuł zademonstrował cel, użycie i implementację właściwości „offsetTop” elementu DOM HTML w JavaScript.
- Następnie utwórz przycisk za pomocą „