Как получить визуализированную высоту элемента?

Опубликовано: 5 Января, 2022

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

  • style.height
  • jQuery (высота, innerHeight, outerHeight)
  • clientHeight, offsetHeight, scrollHeight
  • getComputedStyle
  • getBoundingClientRect (). высота

Отображаемая высота - это высота, которую элемент получает в конечном итоге после применения к нему всех стилей и преобразований. Например, элемент имеет высоту 100 пикселей, а затем получает преобразование: масштаб (0,5) . Его высота отрисовки составляет 50 пикселей (после преобразования), а высота макета - 100 пикселей.

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

Примечание. Работает только в том случае, если мы явно устанавливаем высоту как встроенную с помощью атрибута style в HTML.

Синтаксис:

let height = document.getElementById("someId").style.height;

Пример:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" />
< style >
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
}
</ style >
</ head >
< body >
< div id = "div1" >
< h1 >
style.height without
inline style
</ h1 >
</ div >
< div id = "div2" style = "height: 100px;" >
< h1 >style.height with inline style</ h1 >
</ div >
< button onclick = "alertHeight()" >
Get Height
</ button >
< script >
function alertHeight() {
alert(document.getElementById
("div1").style.height);
alert(document.getElementById
("div2").style.height);
}
</ script >
</ body >
</ html >

Выход:
Он возвращает пустую строку для «div1» и возвращает «100 пикселей» для «div2».

  • Для «div1»:
  • Для «div2»:

Вывод: он возвращает любую высоту, указанную только в атрибуте встроенного стиля. Он не учитывает никаких трансформаций, таких как масштаб. Это ненадежно, и его не следует использовать, поскольку встроенные стили не идеальны.

jQuery (высота, innerHeight, outerHeight)
height () Возвращает текущую высоту элемента. Он не включает отступы , границы или поля . Он всегда возвращает значение пикселя без единицы измерения.

Примечание. Функция height () всегда возвращает высоту содержимого, независимо от значения свойства CSS box-sizing.

Синтаксис:

 пусть высота = $ ("# div1"). height ();

Пример 2:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" />
< style >
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
}
</ style >
< script src =
</ script >
</ head >
< body >
< div id = "div1" >
< h1 >$(".class").height</ h1 >
</ div >
< button onclick = "alertHeight()" >
Get Height
</ button >
< script >
function alertHeight() {
alert($("#div1").height());
}
</ script >
</ body >
</ html >

Выход:
Он возвращает значение пикселя без единицы измерения как 100.

Выход:

innerHeight () Возвращает текущую высоту элемента, включая верхнее и нижнее отступы, но не границу. Он всегда возвращает значение пикселя без единицы измерения.

Синтаксис:

 пусть высота = $ ("# div1"). innerHeight ();

Пример 3:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" />
< style >
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
margin: 5px;
}
</ style >
< script src =
</ script >
</ head >
< body >
< div id = "div1" >
< h1 >$(".class").innerHeight</ h1 >
</ div >
< button onclick = "alertHeight()" >
Get Height
</ button >
< script >
function alertHeight() {
alert($("#div1").innerHeight());
}
</ script >
</ body >
</ html >

Выход:
Он возвращает 120, что составляет (10 (верхнее заполнение) + 100 (высота содержимого) + 10 (нижнее заполнение))

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

Синтаксис:

 пусть высота = $ ("# div1"). outerHeight (); 
пусть высота = $ ("# div1"). outerHeight ();

Пример 4:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" />
< style >
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
margin: 5px;
}
</ style >
< script src =
</ script >
</ head >
< body >
< div id = "div1" >
< h1 >$(".class").outerHeight</ h1 >
</ div >
< button onclick = "alertHeight()" >
Get Height
</ button >
< script >
function alertHeight() {
alert($("#div1").outerHeight());
}
</ script >
</ body >
</ html >

Выход:

(1 (верхняя граница) + 10 (верхний отступ) + 100 (высота содержимого) +1 0 (нижний отступ) + 1 (нижняя граница)

Примечание . Значение, сообщаемое функциями height () , innerHeight () и outerHeight () , не гарантирует точность, если элемент или его родительский элемент скрыт. Чтобы получить точные результаты, перед использованием этих методов убедитесь, что элемент виден. jQuery попытается временно показать, а затем снова скрыть элемент, чтобы измерить его размеры, но это ненадежно и (даже если оно точно) может значительно повлиять на производительность страницы. Эта функция измерения показа-и-повторного скрытия может быть удалена в будущей версии jQuery.

Заключение:

// Если вам нужна высота div без полей / отступов / границ
$ ('# div1'). высота ();
// Если вам нужна высота div с отступом, но без границы + поля
$ ('# div1'). innerHeight ();
// Если вам нужна высота div, включая отступы и границу
$ ('# div1'). ВнешнийHeight ();
// Для включения границы + поля + отступа можно использовать
$ ('# div1'). outerHeight (истина);

Все они возвращают только высоту макета, а не высоту визуализации .

clientHeight, offsetHeight, scrollHeight
clientHeight () Возвращает высоту отображаемого содержимого из элемента (включая вертикальные отступы, но не границу, поля или полосу прокрутки). Он всегда возвращает целочисленное значение в пикселях. Если элемент скрыт, возвращается 0. Если это прокручиваемый элемент, он даст только высоту видимой части.

Синтаксис:

 let height = document.getElementById ("div1"). clientHeight;

Пример 5:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" />
< style >
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</ style >
< script src =
</ script >
</ head >
< body >
< div id = "div1" >
< h1 >.clientHeight</ h1 >
</ div >
< button onclick = "alertHeight()" >
Get Height
</ button >
< script >
function alertHeight() {
alert(document.getElementById
("div1").clientHeight);
}
</ script >
</ body >
</ html >

Выход:

Он возвращает 120, что составляет (10 (верхнее заполнение) + 100 (высота содержимого) + 10 (нижнее заполнение))

Вывод: если мы хотим найти высоту фактически отображаемого контента, используйте clientHeight. Он возвращает высоту макета видимой в данный момент части элемента, которая округляется до целого числа, даже если результат является дробным.

offsetHeight () Возвращает высоту, которую занимает элемент, включая вертикальные отступы, границу и полосы прокрутки (если есть). Это не включает маржу. Он всегда возвращает целочисленное значение в пикселях. Если элемент скрыт, возвращается 0.

Примечание. Он не включает высоту псевдоэлементов, таких как :: after или :: before.

Синтаксис:

 let height = document.getElementById ("div1"). offsetHeight;

Пример 6:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" />
< style >
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</ style >
</ head >
< body >
< div id = "div1" >
< h1 >.offsetHeight</ h1 >
</ div >
< button onclick = "alertHeight()" >
Get Height
</ button >
< script >
function alertHeight() {
alert(document.getElementById
("div1").offsetHeight);
}
</ script >
</ body >
</ html >

Выход:

Он возвращает 122, что составляет (1 (верхняя граница) + 10 (верхняя граница) + 100 (contentHeight) + 10 (нижняя граница) + 1 (нижняя граница)).

Заключение: если вам нужно знать общую высоту, занимаемую элементом, включая ширину видимого содержимого, полосы прокрутки (если есть), отступы и границу, мы можем использовать offsetWidth . Он возвращает высоту макета видимой в данный момент части элемента, которая округляется до целого числа.

scrollHeight () Возвращает высоту всего содержимого элемента, даже если только его часть видна из-за полос прокрутки. Он всегда возвращает целочисленное значение в пикселях. Если элемент скрыт, возвращается 0.

Он похож на clientHeight, поскольку он включает элемент и его отступы , но не его границу, поле или горизонтальную полосу прокрутки (если есть). Он также может включать высоту псевдоэлементов, таких как :: before или :: after . Если содержимое элемента может поместиться без вертикальной полосы прокрутки, его scrollHeight равен clientHeight.

Синтаксис:

 let height = document.getElementById ("div1"). scrollHeight

Пример 7:

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" />
< style >
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
.div0 {
height: 50px;
}
#div1 {
height: 100px;
padding: 10px;
overflow: auto;
}
</ style >
</ head >
< body >
< div id = "div1" >
< h1 >.offsetHeight</ h1 >
As the placement season is back
so are we to help you ace the
interview.We have selected some
most commonly asked and must do
practice problems for you. You
can also take part in our mock
placement contests which will
help you learn different topics
and practice at the same time,
simulating the feeling of a
real placement test environment.
There are many important things
that should be taken care of,
like user friendliness,modularity,
security, maintainability, etc.
Why to worry about performance?
The answer to this is simple, we
can have all the above things
only if we have performance. So
performance is like currency through
which we can buy all the above things.
Another reason for studying performance
is – speed is fun! To summarize,
performance == scale. Imagine a text
editor that can load 1000 pages,
but can spell check 1 page per minute
OR an image editor that takes 1 hour
to rotate your image 90 degrees left
OR … you get it. If a software feature
can not cope with the scale of tasks
users need to perform – it is as good
as dead.
</ div >
< button onclick = "alertHeight()" >
Get Height</ button >
< script >
function alertHeight() {
alert(document.getElementById
("div1").scrollHeight);
}
</ script >
</ body >
</ html >


</ div

Выход:

(1 (верхняя граница) + 10 (верхняя граница) + весь контент (видимый и невидимый) + 10 (нижняя граница) + 1 (нижняя граница))

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

Метод getComputedStyle (): Метод getComputedStyle () в основном позволяет нам получать разрешенные значения CSS для различных свойств. Он возвращает объект CSSStyleDeclaration. Вычисленный стиль используется при отображении элемента после применения «стилей» из нескольких источников.

getComputedStyle (). height Возвращает указанную высоту макета, а не визуализированную высоту. Возвращает дробное значение пикселя. Это разрешенное значение, поэтому, если мы используем 100%, оно вернет эквивалентное разрешенное значение в пикселях. Он дает только высоту содержимого. Если мы хотим, мы можем получить доступ к каждому свойству CSS, например, margin-top, margin-bottom, padding-top, padding-bottom, border-top, border-bottom индивидуально и добавить их по мере необходимости.

Синтаксис:

 пусть высота = getComputedStyle (document.getElementById ("div1")). height;

или

let height = getComputedStyle (document.getElementById ("div1"))
.getPropertyValue ("высота");
let marg