Овај текст елаборира рад својства “оффсетТоп” у ЈаваСцрипт-у.
Како ХТМЛ ДОМ “оффсетТоп” својство функционише у ЈаваСцрипт-у?
„ оффсетТоп ” својство ради на ХТМЛ елементима и враћа „маргину“, горњи „одмак“, „ивицу“ и „траку за померање“ свог родитељског елемента.
Синтакса
елемент. оффсетТоп
У овој синтакси, „ елемент ” означава горњу позицију одређеног ХТМЛ елемента у односу на оквир за приказ (празно подручје где се приказује садржај веб странице).
Белешка: Враћена вредност укључује следеће:
- горњу позицију и маргину елемента.
- горња ивица, трака за померање и допуна родитеља.
Хајде да практично користимо горњу синтаксу.
Пример: Примена својства „оффсетТоп“ за процену горње позиције ХТМЛ-а
Овај пример користи „ оффсетТоп ” својство за израчунавање горње позиције одређеног ХТМЛ елемента, тј. <див> ” укључујући његову маргину у пикселима.
ХТМЛ код
Прво прођите кроз следећи ХТМЛ код:
< див ид = 'Див1' стил = 'топ:20пк; поситион:релатив;маргин:15пк;бордер:3пк солид блуевиолет;тект-алигн:центер; паддинг:10пк;' >< б > Детаљи ово див су : б >< бр >
топ : 20пк < бр >
положај : релативан < бр >
текст - поравнајте : центар < бр >
маргина : 15пк < бр >
граница : 3пк < бр >
див >< бр >
< дугме онцлицк = 'јсФунц()' > Кликни дугме >
< п ид = 'за' > стр >
У горњем коду:
- „ <див> ” елемент се креира са наведеним ИД-ом „Див1” поред „ стил ” својство које врши наведени стил.
- Након тога, део тела „<див>” наводи наведене информације.
- Затим креирајте дугме користећи „ <дугме> ” ознака која има придружену “ онцлицк ” догађај за извршавање функције “ јсФунц() ” након клика на дугме.
- На крају, додајте празан пасус преко „ <п> ” за приказ израчунате горње позиције елемента “<див>”.
ЈаваСцрипт код
Сада размотрите дати ЈаваСцрипт код:
< скрипта >функција јсФунц ( ) {
вас елмнт = документ. гетЕлементБиИд ( 'Див1' ) ;
где ткт = 'Израчунати ОффсетТоп је: ' + елмнт. оффсетТоп + 'пк<бр>' ;
документ. гетЕлементБиИд ( 'за' ) . иннерХТМЛ = ткт ;
}
скрипта >
У горњим редовима кода:
- Функција је дефинисана под називом „ јсФунц() ”.
- У својој дефиницији, променљива „ елмнт ” је проглашен са „ био ” кључна реч која користи „ гетЕлементБиИд() ” метод за приступ укљученом „див” по његовом ИД-у „ Див1 ”.
- Након тога, примените „ оффсетТоп ” у променљивој „ткт” за израчунавање горње позиције преузетог „див” у пикселима.
- Коначно, „гетЕлементБиИд()“ се поново примењује да би се приступило додатом празном пасусу и додала израчуната вредност горње позиције елемента „<див>“ у параграф преко „ иннерХТМЛ ' имовина.
Излаз
У овом исходу, може се приметити да је горња позиција датог дива (укључујући маргину), тј. 35пк ” се израчунава у складу са наведеном напоменом (на почетку блога) и приказује се након клика на дугме.
Закључак
ЈаваСцрипт пружа „ оффсетТоп ” за израчунавање горње позиције ХТМЛ елемента у односу на оквир за приказ. Враћа израчунату горњу позицију елемента као целобројну вредност у „ пиксела ”. Овај запис је показао циљ, употребу и имплементацију ХТМЛ ДОМ елемента „оффсетТоп“ својства у ЈаваСцрипт-у.