Es fácil modificar los estilos de los elementos, pero es un poco difícil leer el valor.
JavaScript no puede leer ninguna propiedad de estilo de elemento (elem.style) proveniente de css (interno / externo) a menos que use el método incorporado, llame a getComputedStyle en javascript.
getComputedStyle (elemento [, pseudo])
Elemento: El elemento para el que se lee el valor.
pseudo: un pseudo-elemento si es necesario, por ejemplo :: antes. Una cadena vacía o sin argumento significa el elemento en sí.
El resultado es un objeto con propiedades de estilo, como elem.style, pero ahora con respecto a todas las clases css.
Por ejemplo, aquí el estilo no ve el margen:
<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>
Así que modificó su código javaScript para incluir el getComputedStyle del elemento que desea obtener es ancho / alto u otro 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 calculados y resueltos
Hay dos conceptos en CSS:
Un valor de estilo calculado es el valor después de aplicar todas las reglas CSS y la herencia CSS, como resultado de la cascada CSS. Puede parecer altura: 1em o tamaño de fuente: 125%.
Un valor de estilo resuelto es el que finalmente se aplica al elemento. Valores como 1em o 125% son relativos. El navegador toma el valor calculado y hace que todas las unidades sean fijas y absolutas, por ejemplo: altura: 20 píxeles o tamaño de fuente: 16 píxeles. Para las propiedades de geometría, los valores resueltos pueden tener un punto flotante, como el ancho: 50.5px.
Hace mucho tiempo, getComputedStyle se creó para obtener valores calculados, pero resultó que los valores resueltos son mucho más convenientes y el estándar cambió.
Así que hoy en día getComputedStyle realmente devuelve el valor resuelto de la propiedad.
Tenga en cuenta:
getComputedStyle requiere el nombre completo de la propiedad
Siempre debe solicitar la propiedad exacta que desea, como paddingLeft o height o width. De lo contrario, no se garantiza el resultado correcto.
Por ejemplo, si hay propiedades paddingLeft / paddingTop, ¿qué deberíamos obtener para getComputedStyle (elem) .padding? ¿Nada o tal vez un valor "generado" a partir de rellenos conocidos? No hay una regla estándar aquí.
Hay otras inconsistencias. Como ejemplo, algunos navegadores (Chrome) muestran 10px en el documento a continuación, y algunos de ellos (Firefox), no:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
para más información https://javascript.info/styles-and-classes
