Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма Основи на програмирането с JavaScript
Основи на програмирането с JavaScript
7. Работа с DOM

Размери и позиция на елементи

Курсове Основи на програмирането с JavaScript Седмица 7 - Работа с DOM

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

Основи на програмирането с JavaScript В курса ще се научите как да пишете код с помощта на един от най-популярните програмни езици - JavaScript. Този курс е идеален за напълно начинаещи и ще ви помогне да разберете основите на програмирането, както и как да създавате интерактивни уеб приложения. Ще придобиете фундаментални умения, които ще ви позволят да създавате динамични уеб сайтове и да поставите основите си за развитие в областта на софтуерното програмиране.

Как да вземеш реалните размери и позиция на DOM елемент

За да работиш прецизно с елементи в DOM, трябва да можеш да измериш реалната им ширина, височина и позиция след като са рендерирани от браузъра. Свойствата от типа offset ти дават тези стойности като цели числа и ги изчисляват спрямо най-близкия родител с позиция, различна от static. Най-важното: позицията с offset не е спрямо целия прозорец, а спрямо позиционирания родител.

Стъпка по стъпка: измерване на елемент

  1. Вземете елемент (например profile) и го запазете в променлива.
  2. Проверете ширината му чрез offsetWidth.
  3. Проверете височината чрез offsetHeight.
  4. Намерете хоризонталната позиция чрез offsetLeft.
  5. Намерете вертикалната позиция чрез offsetTop.
  6. Сравнете offsetHeight със scrollHeight, за да видите дали съдържанието надвишава размера на елемента.

Ако родителят (например nav) има position: fixed, тогава изчисленията за offsetLeft и offsetTop ще бъдат спрямо него.

Основни свойства за работа с размери и позиция

  • offsetWidth – връща реалната ширина на елемента (цяло число, в пиксели)
  • offsetHeight – връща реалната височина на елемента
  • offsetLeft – разстояние отляво спрямо позиционирания родител
  • offsetTop – разстояние отгоре спрямо позиционирания родител
  • scrollHeight – общата височина на съдържанието, включително скритата част при скрол

В повечето случаи използвайте offsetHeight, освен ако не работите със скролируемо съдържание.

Дискусия към урока