0

Хочу получить высоту элемента. Пишу следующим образом:

    let header = document.getElementsByClassName('header')[0].style;
    console.log(header);

В консоли получаю объект CSSStyleDeclaration. И в нём все значения свойств пустые. А я рассчитывал получить объект с наполненными данными.

Результат

Как я могу получить не просто то значение, которое в CSS прописано, а уже высчитанное значение в пикселях? Ведь иногда в качестве значения высоты может быть auto или calc()

Интересует решение только на нативном JS.

1

1 ответ 1

3

getElementsBy... — собирает "живой" список элементов, который обновляется при каждом обращении. Вместо этого можно использовать querySelectorAll - он один раз собирает список и всё. А в вашем случае, querySelector — находит первый элемент и останавливается.
• Объект element.style хранит только то, что реально написано в HTML-элементе, в атрибуте style="...":

let header = document.querySelector('.header').style;

console.log(header);
<div class="header" style="align-content: center;"></div>

Все примененные стили можно достать через getComputedStyle( elem ). Но это объект с сотнями свойств. Если нужны координаты элемента и его ширина / высота, можно (нужно) вместо него использовать elem.getBoundingClientRect(). А если только высота: elem.offsetHeight, elem.clientHeight — первое дает высоту с учетом рамки, второе - без:

let header = document.querySelector('.header');

console.log( "Computed → " + getComputedStyle( header ).height );
// Строка с числом + "px". Хочет дополнительно parseFloat("165px") → 165

/*******************************/

let rect = header.getBoundingClientRect();

console.log( "Rect object → " + JSON.stringify(rect) );
console.log( "Rect.height → " + rect.height );

/*******************************/

let inner = header.clientHeight;
let outer = header.offsetHeight;

console.log( "clientHeight → " + inner ); // число
console.log( "offsetHeight → " + outer ); // число
.header {
  height: calc(100vh / 2);
  border: 10px solid red;
}
<div class="header" style="align-content: center;"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.