Какво представлява свойството offsetTop на HTML DOM елемент в JavaScript

Kakvo Predstavlava Svojstvoto Offsettop Na Html Dom Element V Javascript



HTML DOM елементът ' offsetTop ” оценява горната позиция на посочения HTML елемент, съответстващ на документа. Това е специално свойство само за четене на HTML DOM, което често може да се използва с други свойства на отместване на JavaScript.

Това описание разработва работата на свойството „offsetTop“ в JavaScript.

Как работи свойството „offsetTop“ на HTML DOM в JavaScript?

offsetTop ” свойството работи върху HTML елементите и връща също „полето”, горната „подложка”, „граница” и „лента за превъртане” на своя родителски елемент.







Синтаксис



елемент. offsetTop

В този синтаксис „ елемент ” обозначава горната позиция на конкретния HTML елемент спрямо прозореца за изглед (празна област, където се показва съдържанието на уеб страницата).



Забележка: Върнатата стойност включва следното:





  • горна позиция и границата на елемента.
  • горна граница, лента за превъртане и подложка на родителя.

Нека използваме практически горния синтаксис.

Пример: Прилагане на свойството „offsetTop“ за оценка на горната позиция на HTML

Този пример използва „ offsetTop ” свойство за изчисляване на горната позиция на конкретния HTML елемент, т.е.

”, включително полето му в пиксели.



HTML код

Първо преминете през следния HTML код:

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

< b > Подробности за това div са : b >< бр >

Горна част : 20px < бр >

позиция : роднина < бр >

текст - подравнете : център < бр >

марж : 15px < бр >

граница : 3px < бр >

див >< бр >

< бутон при щракване = 'jsFunc()' > Кликнете върху него бутон >

< p id = 'за' > стр >

В горния код:

  • ” е създаден с посочения идентификатор „Div1” до „ стил ” свойство, което изпълнява посочения стил.
  • След това разделът на тялото на “
    ” указва посочената информация.
  • След това създайте бутон, като използвате „ <бутон> „таг със свързан“ onclick ” събитие за изпълнение на функцията ” jsFunc() ” при натискане на бутона.
  • Накрая добавете празен параграф чрез „

    ” за показване на изчислената горна позиция на елемента „

    ”.

JavaScript код

Сега разгледайте дадения JavaScript код:

< сценарий >

функция jsFunc ( ) {

беше elmnt = документ. getElementById ( 'Div1' ) ;

където txt = 'Изчисленият OffsetTop е: ' + елмнт. offsetTop + 'px
'
;

документ. getElementById ( 'за' ) . innerHTML = текст ;

}

сценарий >

В горните кодови редове:

  • Функцията е дефинирана с име ' jsFunc() ”.
  • В своята дефиниция променливата „ елмнт ” се декларира с „ беше “ ключова дума, която използва „ getElementById() ' метод за достъп до включения 'div' чрез неговия id ' Div1 ”.
  • След това приложете „ offsetTop ” в променливата „txt” за изчисляване на горната позиция на извлечения „div” в пиксели.
  • И накрая, „getElementById()“ се прилага отново, за да се приближи до добавения празен абзац и да се добави изчислената стойност на горната позиция на елемента „
    “ в абзаца чрез „ innerHTML ' Имот.

Изход

В този резултат може да се наблюдава, че горната позиция на дадения div (включително марж), т.е. 35 пиксела ” се изчислява в съответствие с посочената бележка (в началото на блога) и се показва при натискане на бутона.

Заключение

JavaScript предоставя „ offsetTop ” за изчисляване на горната позиция на HTML елемента спрямо прозореца за изглед. Връща изчислената горна позиция на елемент като цяло число в „ пиксели ”. Това описание демонстрира целта, използването и внедряването на свойството „offsetTop“ на HTML DOM елемент в JavaScript.