Этот блог демонстрирует использование элемента DOM clientHeight в HTML.
Как использовать элемент DOM «clientHeight» в HTML?
“ clientHeight » позволяет разработчикам рассчитать высоту видимого содержимого элемента. Это помогает позиционировать элементы относительно друг друга или определять, прокручивал ли пользователь правый край прокручиваемого контейнера. Он также предоставляет информацию об оставшемся неиспользованном пространстве на веб-странице.
Пример
Давайте рассмотрим пример для лучшей демонстрации свойства «clientHeight». Например, « по щелчку прослушиватель событий используется для отображения результата, предоставленного « clientHeight ' свойство:
< тело >
< h2 идентификатор '=' 'элемент' >< / h2 >
< h2 идентификатор '=' 'элемент' по щелчку '=' 'высота' >
Щелкните статью Linuxhint, чтобы отобразить высоту!
< / h2 >
< сценарий >
функция showelementHeight() {
пример var = document.getElementById('элемент');
var elementHeight= example.clientHeight;
alert('Высота: ' + elementHeight + ' пикселей.');
}
< / сценарий > >
< / тело >
Объяснение приведенного выше фрагмента кода описано ниже:
- Сначала создайте « ” тег внутри “ <тело> » и предоставить ему некоторые фиктивные данные. Кроме того, назначьте идентификатор « элемент » к выбранному элементу HTML.
- Далее добавьте « по щелчку() прослушиватель событий, который вызывает « показатьэлементВысота() », когда пользователь нажимает кнопку « элемент.
- Затем внутри « показатьэлементВысота() ” создает переменную с именем “ пример », который действует как экземпляр элемента HTML с идентификатором « элемент ».
- Затем создайте еще одну переменную с именем « elementHeight ’’, в котором хранится результат, предоставленный свойством clientHeight.
- После этого отобразите « elementHeight ’’ переменная в окне предупреждения с помощью « тревога() метод.
В конце добавьте следующие свойства CSS для стилизации « h2 элемент:
< стиль >
#элемент {
поле: 20 пикселей;
отступ: 10 пикселей;
фон- цвет : темно-голубой;
высота : 300 пикселей;
текст- выровнять : центр;
линия- высота : 100 пикселей;
}
< / стиль >
В приведенном выше фрагменте кода следующие свойства CSS назначаются div с идентификатором « элемент ”:
- “ 20 пикселей », « 10 пикселей ' и ' темно-голубой » значения предоставляются CSS « допуск », « набивка ' и ' фоновый цвет свойства соответственно.
- Также использует « высота », « выравнивание текста ' и ' высота линии » Свойства CSS для улучшения видимости для пользователей.
После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:
Вывод показывает, что высота выбранного элемента отображается в окне предупреждения всякий раз, когда пользователь щелкает элемент.
Заключение
Чтобы использовать « clientHeight ” в HTML, выберите элемент HTML, обратившись к атрибуту id. После этого прикрепите свойство «clientHeight» и отобразите результат. Это свойство доступно только для чтения и возвращает результат в пикселях. Свойство clientHeight работает внутри тега