É fácil modificar os estilos dos elementos, mas meio complicado de ler o valor.
O JavaScript não pode ler nenhuma propriedade de estilo de elemento (elem.style) proveniente de css (interno / externo), a menos que você use a chamada de método incorporada getComputedStyle em javascript.
getComputedStyle (elemento [, pseudo])
Elemento: o elemento para o qual ler o valor.
pseudo: um pseudoelemento, se necessário, por exemplo: :: before. Uma cadeia vazia ou nenhum argumento significa o próprio elemento.
O resultado é um objeto com propriedades de estilo, como elem.style, mas agora com relação a todas as classes css.
Por exemplo, aqui o estilo não vê a margem:
<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>
Então, modifique seu código javaScript para incluir o getComputedStyle do elemento que você deseja obter, largura / altura ou outro atributo
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);
}
}
Valores computados e resolvidos
Existem dois conceitos no CSS:
Um valor de estilo calculado é o valor após todas as regras de CSS e a herança de CSS serem aplicadas, como resultado da cascata de CSS. Pode parecer com altura: 1em ou tamanho da fonte: 125%.
Um valor de estilo resolvido é aquele finalmente aplicado ao elemento. Valores como 1em ou 125% são relativos. O navegador pega o valor calculado e torna todas as unidades fixas e absolutas, por exemplo: height: 20px ou tamanho da fonte: 16px. Para propriedades de geometria, os valores resolvidos podem ter um ponto flutuante, como largura: 50,5px.
Há muito tempo, o getComputedStyle foi criado para obter valores computados, mas os valores resolvidos são muito mais convenientes e o padrão foi alterado.
Hoje em dia, getComputedStyle realmente retorna o valor resolvido da propriedade.
Observe:
getComputedStyle requer o nome completo da propriedade
Você sempre deve solicitar a propriedade exata que deseja, como paddingLeft ou height ou width. Caso contrário, o resultado correto não é garantido.
Por exemplo, se houver propriedades paddingLeft / paddingTop, o que devemos obter para getComputedStyle (elem) .padding? Nada, ou talvez um valor "gerado" a partir de campos conhecidos? Não há regra padrão aqui.
Existem outras inconsistências. Como exemplo, alguns navegadores (Chrome) mostram 10px no documento abaixo, e alguns deles (Firefox) - não:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
para mais informações https://javascript.info/styles-and-classes