Получить высоту элемента div в JavaScript

В HTML любые свойства CSS, которые вы предоставляете элементу либо с помощью таблиц стилей CSS, либо с помощью JavaScript, устанавливаются внутри объектной модели документа (DOM). С помощью этой модели DOM вы можете легко получить доступ к этим значениям позже в коде JavaScript. Есть разные способы получить значения свойств CSS внутри JavaScript. В этой статье будет рассказано, как получить свойство CSS height из нашего кода JavaScript.

Ниже представлен созданный нами HTML-документ. Внутри у нас есть тег body, содержащий только один элемент div с идентификатором container. В теге head мы предоставили некоторые базовые стили нашему элементу div, такие как ширина, высота, граница, отступы и т. Д.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #container{
            width: 100px;
            height: 50px;
            border: 1px solid red;
            padding: 4px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    
    <div id="container"></div>

    <script></script>
</body>
</html>

Выход:

получить высоту элемента div в JavaScript

Если вы запустите указанный выше HTML-документ, вы увидите такой прямоугольник в окне браузера.

Теперь, когда у нас все настроено, давайте применим различные свойства к этому container элементу div, чтобы получить его высоту. Код, который мы будем писать, будет помещен в теги <script></script>, присутствующие внутри тега body.

Различные способы получить высоту элементов div в JavaScript

Сначала мы получим ссылку на элемент container из HTML DOM с помощью метода getElementById(). Затем мы сохраним этот элемент внутри переменной element в JavaScript.

let element = document.getElementById('container');

Теперь, когда у нас есть элемент div, давайте получим высоту div, используя различные свойства с помощью JavaScript.

1. clientHeight

clientHeight возвращает высоту элемента, включая отступы, в виде целого числа.

console.log(element.clientHeight);

Выход:

58

Поскольку при расчете высоты мы добавили отступы 4px ко всем четырем сторонам контейнера, которая в настоящее время составляет 50px, отступы 4px сверху и 4px снизу, то есть общее заполнение 8px будет прибавить к высоте. В результате общая высота будет 58px.

2. offsetHeight

offsetHeight состоит из высоты элемента, которая также включает любые отступы, границы и горизонтальную полосу прокрутки (если есть).

console.log(element.offsetHeight);

Выход:

60

Подобно свойству clientHeight, свойство offsetHeight также принимает отступы 8px, высоту содержимого, равную 50px, а также ширину границы, которая составляет 1px вверху и 1px внизу, всего 2 пикселя. . Следовательно, общая высота, возвращаемая этим свойством, будет 8 + 50 + 2, то есть 60px.

3. scrollHeight

scrollHeight возвращает высоту содержимого, включая содержимое, которое не отображается на экране из-за переполнения. Он включает только заполнение элемента, но не границу, поле или горизонтальную полосу прокрутки.

scrollHeight похож на clientHeight. Единственная разница между clientHeight и scrollHeight состоит в том, что scrollheight может также включать высоту содержимого, которое в настоящее время не отображается на экране из-за переполнения.

console.log(element.scrollHeight);

Выход:

58

Высота содержимого составляет 50px, а общий отступ - 8px. Следовательно, общая высота, возвращаемая свойством scrollHeight, составляет 58px.

4. getBoundingClientRect()

Метод getBoundingClientRect() возвращает объект, который содержит информацию, относящуюся к ширине и высоте элемента, а также его положению (x, y, вверху, слева и т. Д.) Относительно области просмотра. Высота, вычисленная этим методом, также содержит отступы и границы.

console.log(element.getBoundingClientRect().height);

Выход:

60

Итак, чтобы получить высоту элемента из объекта, возвращенного методом getBoundingClientRect(), мы должны использовать клавишу height для получения высоты. Здесь высота элемента составляет 50px, отступы - 8px, а ширина границы - 2px. Таким образом, эта функция вернет общую высоту 60px.