Стили элементов легко изменить, но довольно сложно прочитать значение.
JavaScript не может прочитать никакое свойство стиля элемента (elem.style), исходящее из CSS (внутреннее / внешнее), если вы не используете встроенный вызов метода getComputedStyle в javascript.
getComputedStyle (element [, pseudo])
Элемент: Элемент, для которого нужно прочитать значение.
псевдо: Псевдоэлемент, если требуется, например, :: before. Пустая строка или отсутствие аргумента означает сам элемент.
В результате получается объект со свойствами стиля, например, 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-каскада. Это может выглядеть
как высота: 1em или размер шрифта: 125%.
Разрешенное значение стиля - это то, которое окончательно применяется к элементу.
Значения, такие как 1em или 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