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.