Как узнать полную высоту блока включая марджинТоп и марджинБаттн? Спасибо!

Question

Как узнать полную высоту блока включая марджинТоп и марджинБаттн? Спасибо!

Эльдар Тайлов Ученик (67), на голосовании 3 года назад

Let item = document.querySelector('.some_div');
let itemStyle = getComputedStyle(item);

let h = item.getBoundingClientRect().height + parseInt(itemStyle.marginTop) + parseInt(itemStyle.marginBottom);

не работает, вся проблема что parseInt(itemStyle.marginTop) возвращает почему-то НаН...

Answer 1

Это будет работать только в том случае, если margin-top задан непосредственно элементу, а не классу и так далее.

Answer 2

Ordo Seclorum Оракул (58396) 3 года назад

Самое тупое, что можно придумать, это

let height = parseInt(itemStyle.height) + parseInt(itemStyle.marginTop) + parseInt(itemStyle.marginBottom);

ЯрославИскусственный Интеллект (107837) 3 года назад

parseInt('10px') + parseInt('2rem') = #здравствуйжопановыйгод

Ярослав Искусственный Интеллект (107837) Еще веселее: parseInt('0.5rem')

Answer 3

В блочной модели, размер не включает маржины - это ВНЕШНИЕ отступы. Если по какой-то причине требуется их учесть, то надо суммировать с размерами.
Чтобы корректно посчитать отступы, с учетом их возможного схлопывания - вычисляй их из координат смежных элементов. Например, разность абсолютных b.bcr().top - a.bcr().bottom даст значение фактического вертикального отступа между a и b. Еще раз акцентирую, что относительные координаты должны быть переведены в абсолютные - иначе, вместо результата херня получится.