Es fácil establecer valores CSS en línea con javascript. Si quiero cambiar el ancho y tengo un html como este:
<div style="width: 10px"></div>Todo lo que necesito hacer es:
document.getElementById('id').style.width = value;Cambiará los valores de la hoja de estilo en línea. Normalmente esto no es un problema, porque el estilo en línea anula la hoja de estilo. Ejemplo:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId"></div>Usando este Javascript:
document.getElementById('tId').style.width = "30%";Obtengo lo siguiente:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId" style="width: 30%";></div>Esto es un problema, porque no solo no quiero cambiar los valores en línea, si busco el ancho antes de configurarlo, cuando tengo:
<div id="tId"></div>El valor devuelto es Nulo, por lo que si tengo Javascript que necesita saber el ancho de algo para hacer algo de lógica (aumento el ancho en un 1%, no a un valor específico), obtengo Null cuando espero la cadena "50% "realmente no funciona.
Entonces mi pregunta: tengo valores en un estilo CSS que no están ubicados en línea, ¿cómo puedo obtener estos valores? ¿Cómo puedo modificar el estilo en lugar de los valores en línea, dada una identificación?