В этой статье подробно рассматривается работа свойства «offsetTop» в JavaScript.
Как работает свойство HTML DOM «offsetTop» в JavaScript?
“ смещениеВерх » работает с HTML-элементами и также возвращает «маржу», верхний «отступ», «границу» и «полосу прокрутки» своего родительского элемента.
Синтаксис
элемент. смещениеВерх
В этом синтаксисе « элемент ” обозначает верхнюю позицию конкретного HTML-элемента относительно области просмотра (пустой области, где отображается содержимое веб-страницы).
Примечание: Возвращаемое значение включает в себя следующее:
- верхняя позиция и поле элемента.
- верхняя граница, полоса прокрутки и отступ родителя.
Давайте используем приведенный выше синтаксис на практике.
Пример: применение свойства «offsetTop» для оценки верхней позиции HTML
В этом примере используется « смещениеВерх » для вычисления верхней позиции конкретного элемента HTML, т. е. « <дел> », включая его поля в пикселях.
HTML-код
Сначала просмотрите следующий HTML-код:
< идентификатор div '=' 'Див1' стиль '=' 'верх: 20 пикселей; положение: относительное; поле: 15 пикселей; граница: 3 пикселя сплошной сине-фиолетовый; выравнивание текста: по центру; отступ: 10 пикселей;' >< б > Детали этот div являются : б >< бр >
вершина : 20 пикселей < бр >
позиция : родственник < бр >
текст - выровнять : центр < бр >
допуск : 15 пикселей < бр >
граница : 3 пикселя < бр >
див >< бр >
< кнопка при нажатии '=' 'jsFunc()' > Нажмите на нее кнопка >
< идентификатор p '=' 'для' > п >
В приведенном выше коде:
- “ <дел> » создается элемент с указанным идентификатором «Div1» вместе с « стиль », которое выполняет указанный стиль.
- После этого в теле раздела «» указывается заявленная информация.
- Затем создайте кнопку, используя « <кнопка> », имеющий связанный « по щелчку ” событие для выполнения функции ” jsFunc() ” после нажатия кнопки.
- Наконец, добавьте пустой абзац через « <р> », чтобы отобразить рассчитанную верхнюю позицию элемента «
».JavaScript-код
Теперь рассмотрим данный код JavaScript:
< сценарий >
функция jsFunc ( ) {
был первым '=' документ. получитьэлементбиид ( 'Див1' ) ;
где текст '=' 'Вычисленный OffsetTop:' + вяз. смещениеВерх + 'пкс
' ;
документ. получитьэлементбиид ( 'для' ) . внутреннийHTML '=' текст ;
}
сценарий >В приведенных выше строках кода:
- Функция определена как « jsFunc() ».
- В своем определении переменная « Вяз ” объявляется с пометкой “ был ключевое слово, которое использует « получитьэлемент по идентификатору() ' метод для доступа к включенному 'div' по его идентификатору ' Раздел 1 ».
- После этого примените « смещениеВерх » в переменной «txt», чтобы вычислить верхнюю позицию извлеченного «div» в пикселях.
- Наконец, снова применяется «getElementById()», чтобы приблизиться к добавленному пустому абзацу и добавить вычисленное значение верхней позиции элемента «» в абзаце через « внутреннийHTML ' свойство.
Выход
В этом результате можно заметить, что верхняя позиция данного div (включая маржу), т. е. « 35 пикселей » вычисляется в соответствии с указанной заметкой (в начале блога) и отображается при нажатии кнопки.
Заключение
JavaScript предоставляет « смещениеВерх », чтобы вычислить верхнюю позицию HTML-элемента относительно области просмотра. Он возвращает рассчитанную верхнюю позицию элемента в виде целочисленного значения в « пикселей ». В этой статье продемонстрированы цель, использование и реализация свойства «offsetTop» элемента HTML DOM в JavaScript.