Разработка на Java — востребованное направление, такие специалисты будут нужны на рынке еще долго. На курсе «Java-разработчик» от Skypro освоить профессию можно с нуля за 11 месяцев, даже если вы гуманитарий и ничего не знаете об IT. Программа составлена от простого к сложному и адаптирована для новичков. Преподаватели — практикующие специалисты из крупных компаний: «Сбер», «Самокат» и других.
Часто в процессе веб-разработки возникает потребность в получении размеров html-элементов. Один из таких размеров — высота.
Пусть есть div элемент с заданными в CSS стилях размерами:
<div id="myDiv" style="width: 200px; height: 400px;">Это пример div элемента</div>
При попытке получить высоту данного элемента с помощью JavaScript через свойство style.height, может возникнуть проблема. Возвращаемым значением будет пустая строка, вместо ожидаемого значения.
var myDiv = document.getElementById('myDiv');
console.log(myDiv.style.height); // возвращает ""
Это происходит потому, что свойство style в JavaScript возвращает только те стили, которые были прописаны непосредственно в теге элемента (inline стили).
Для получения высоты элемента, необходимо использовать другие свойства.
Свойство offsetHeight
Одним из способов получения высоты элемента является использование свойства offsetHeight. Это свойство возвращает высоту элемента, включая padding, но не включая margin.
var myDiv = document.getElementById('myDiv');
console.log(myDiv.offsetHeight); // возвращает 400
В Skypro на курсе «Java-разработчик» вы научитесь писать программы для игр и приложений, освоите все нужные инструменты: Git, GitHub, Docker, Swagger, PostgreSQL и другие. Потренируетесь под руководством опытных наставников и соберете сильное портфолио. На курсе действует гарантия трудоустройства: поможем вам найти работу или вернем деньги за курс.
Свойство clientHeight
Еще одним способом является использование свойства clientHeight. Это свойство также возвращает высоту элемента, включая padding, но не включая margin и полосу прокрутки.
var myDiv = document.getElementById('myDiv');
console.log(myDiv.clientHeight); // возвращает 400
Таким образом, с помощью JavaScript есть возможность получить высоту html-элемента без использования библиотеки jQuery.
Добавить комментарий