Легко изменить стили элементов, но довольно сложно прочитать значение.
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%, являются относительными. Браузер принимает вычисленное значение и делает все единицы фиксированными и абсолютными, например: height: 20px или font-size: 16px. Для свойств геометрии разрешенные значения могут иметь плавающую точку, например, ширину: 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