Сложности в получении стилей нативным JS

219
10 ноября 2021, 23:20

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

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

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

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

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

Answer 1

• 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>

READ ALSO
Не распознается переменная Jquery validator
javascript

Не распознается переменная Jquery validator

Я пытаюсь добавить свой метод для валидации поля с помощью jQueryvalidator

 267
Текст внутри контейнера
javascript

Текст внутри контейнера

Я делаю <v-card> во vuetify и хочу сделать так, чтобы текст у меня был ограниченТ

 160
Фильтровать из переменной jquery
jQuery

Фильтровать из переменной jquery

В аякс приходит ответ от сервера html, но в виде строки и мне нужно выбрать определенный тег, как правильно это сделать? пробовал через filter, но не получилось

 79
Перехват исключения (стоит ли) C#
c#

Перехват исключения (стоит ли) C#

Мне кажется код немного кривоват, но не могу понять как лучше его переделатьКод:

 104