Получение размера и положения элемента в JavaScript DOM

getBoundingClientRect – это часть JavaScript DOM, которая предоставляет важные данные о размере и расположении HTML-элемента.

Читайте также: Основы DOM

В этом мануале вы научитесь использовать getBoundingClientRect, чтобы получить размер и положение необходимого вам элемента.

Требования

Чтобы выполнить это руководство, вы должны ознакомиться со следующими статьями:

Как работает getBoundingClientRect()

Чтобы использовать метод getBoundingClientRect, сначала выберите HTML-элемент, а затем вызовите getBoundingClientRect для этого элемента:

document.getElementById("foo").getBoundingClientRect();

Метод getBoundingClientRect возвращает объект с несколькими парами ключ-значение, которые предоставляют информацию о размере и расположении элемента на веб-странице. Вывод выглядит так:

{
top: 450,
left: 400,
right: 825,
bottom: 500,
x: 400,
y: 450,
width: 425,
height: 50
}

Значения x и y будут отвечать значениям left и top. Поэтому некоторые браузеры пропускают x и y и выдают только left и top.

Еще одна вещь, на которую следует обратить внимание, – это то, что значения right/bottom могут отличаться от того, что вы привыкли видеть при позиционировании CSS (например, при использовании position: absolute).

Теперь, когда вы ознакомлены с выводом getBoundingClientRect(), давайте попробуем выполнить один пример, чтобы разобраться со всем на практике.

Метод getBoundingClientRect в приложении

Чтобы использовать getBoundingClientRect в своем коде, вам понадобится HTML-документ с элементом, который вы хотите запросить.

Создайте в текстовом редакторе новый HTML-файл по имени boundingbox.html:

nano boundingbox.html`

В этом файле создайте HTML-документ, содержащий тег <div> с параметром id=”hello” внутри <body>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>useBoundingBox example</title>
</head>
<body>
<div id="hello">Hello World</div>
</body>
</html>

Когда на странице есть элемент, вы можете вызвать getBoundingClientRect для элемента #foo. После закрывающего тега <body> вставьте новый тег <script>. Внутри этого тега выберите элемент с id hello и вызовите метод getBoundingClientRect(). Выведите результаты на консоль JavaScript.

<body>
<div id="hello">Hello World</div>
<script>
const helloElement = document.getElementById('hello');
const results = helloElement.getBoundingClientRect();
</script>
</body>

Сохраните файл и загрузите файл boundingbox.html в браузер.

Консоль покажет такой вывод:

bottom: 27.199996948242188
height: 19.199996948242188
left: 8
right: 1261
top: 8
width: 1253
x: 8
y: 8

На экране вы видите размер и положение элемента #hello на веб-странице. Вы можете использовать полученную только что информацию, чтобы относительно этого элемента расположить другие элементы, анимировать их и т.п.

Заключение

В этой статье вы на практике убедились, что метод getBoundingClientRect предоставляет много полезных данных о расположении элемента на странице. Поскольку getBoundingClientRect относится к области просмотра, вы можете добавить значения window.scrollY и window.scrollX в поля top и left, чтобы узнать расположение HTML-элемента относительно всей веб-страницы.

Этот метод надежно поддерживается всеми настольными и мобильными браузерами; как мы уже говорили, проблемы могут возникнуть только со значениями x и y, которые не поддерживаются в старых версиях Internet Explorer/Edge и Safari.

За подробной информацией о методе getBoundingClientRect обращайтесь к официальной документации по W3C.

Tags: ,

Добавить комментарий