Стилі елементів легко змінювати, але начебто складно читати значення.
JavaScript не може прочитати будь-яке властивість стилю елемента (elem.style), що надходить з css (внутрішній / зовнішній), якщо ви не використовуєте вбудований виклик методу getComputedStyle в JavaScript.
getComputedStyle (елемент [, псевдо])
Елемент: елемент, для якого слід прочитати значення.
pseudo: Якщо потрібен, псевдоелемент, наприклад :: раніше. Порожній рядок або відсутність аргументу означає сам елемент.
Результат - об’єкт із властивостями стилю, наприклад, elem.style, але тепер стосовно всіх класів css.
Наприклад, тут стиль не бачить поля:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Таким чином, ви змінили код javaScript, щоб включити елемент getComputedStyle для елемента, який ви хочете отримати, його ширина / висота або інший атрибут
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
Обчислені та вирішені значення
У CSS є два поняття:
Обчислене значення стилю - це значення після застосування всіх правил CSS та успадкування CSS, як результат каскаду CSS. Він може виглядати як висота: 1ем або розмір шрифту: 125%.
Розв’язане значення стилю - це те, що остаточно застосовується до елемента. Такі значення, як 1ем або 125%, відносні. Браузер приймає обчислене значення і робить усі одиниці фіксованими та абсолютними, наприклад: висота: 20 пікселів або розмір шрифту: 16 пікселів. Для геометричних властивостей вирішені значення можуть мати плаваючу точку, наприклад ширину: 50,5 пікселів.
Дуже давно створено getComputedStyle для отримання обчислених значень, але виявилося, що розв'язані значення набагато зручніше, а стандарт змінився.
Отже, сьогодні getComputedStyle фактично повертає вирішене значення властивості.
Будь ласка, запиши:
getComputedStyle вимагає повного імені властивості
Ви завжди повинні запитувати точну властивість, яку ви хочете, наприклад paddingLeft або висоту чи ширину. Інакше правильний результат не гарантується.
Наприклад, якщо є властивості paddingLeft / paddingTop, то що нам слід отримати для getComputedStyle (elem) .padding? Нічого, а може бути, "генерованого" значення з відомих прокладок? Тут немає жодного стандартного правила.
Є й інші невідповідності. Наприклад, деякі веб-переглядачі (Chrome) показують 10px в документі нижче, а деякі з них (Firefox) - не:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
для отримання додаткової інформації https://javascript.info/styles-and-classes