А есть ли jQuery height() чистом js?

Question

[I'm Yoda]

Привет товарищи!

Хочу избавится от jquery!
Да, либа хорошая, очень юзабельна и много полезных хороших плагинов. Так получилось, что начал изучать JS именно с jquery в силу простоты использования.

Конкретно сейчас столкнулся с проблемой, как же всё таки правильно получить высоту скрытого элемента.

В jquery есть замечательный метод height(), который вне зависимости от видимости элемента, показывает его реальную высоту.

На чистом JS (clientHeight, offsetHeight) все показывает 0. Объясните товарищи, как правильно посчитать высоту скрытого элемента?:)

Заранее благодарен!

Comments

[Kovalsky]

$ вроде бы в опенсурсе, соответственно весь код в открытом доступе, включая $.fn.height

Answer 1

[Дима Паутов]

Если элемент скрыт(display: none) - то его высота равна 0, jquery ни jquery.
Если элемент скрыт просто визуально(opacity и т.п.), то всегда покажется реальная высота. Исключение - это transform: scale.

Или же, высота может быть 0, но благодаря padding и border высота есть. Нужно просто учитывать эти свойства при получении размера, просто тупо сложив

Дайте код

Comments

[Никита Кит]

К сиему чистому разъяснению по данному вопросу хочу лишь добавить его автору обход проблемы нулевой блочной модели display none.
Чтобы вычислить высоту скрытого блока, его нужно скрывать через opacity: 0; pointer-events: none. Что будет равнозначно действию display: none с сохранением в доме блочной модели скрываемого элемента

Answer 2

[Антон Усачев]

Ссылка номер два по запросу:

Answer 3

[Андрей]

Сайт в помощь youmightnotneedjquery.com

Answer 4

[Жук]

element.style.clientHeight — height из свойств (это и есть эквивалент $.height который учитывает только padding)
element.offsetHeight — с учетом border, padding, скролла и тд