Manejo de los estilos en JavaScript

 
Para cambiar un estilo de una etiqueta, la forma mas sencilla suele ser el objeto style. Se haría de la siguiente forma:

document.getElementById('id_etiqueta').style.nombreEstilo = "valor_del_estilo";

También se puede coger un valor de un estilo de una etiqueta de la misma forma, por ejemplo:

alert(document.getElementById('id_etiqueta').style.nombreEstilo);

Esto sólo devuelve el valor si el estilo ha sido asignado en la propia etiqueta, por ejemplo:

<p style="color:red" id="id_etiqueta">TEXTO</p>

Sin embargo esto no es lo más recomendable, ya que por lo general los estilos se suelen hacer en un archivo css para todas las páginas de la Web, o en el "head" del documento con la etiqueta "style". Por lo que la mayoría de las veces esto no devolverá ningún valor, aunque si funcionará para establecer un valor, ya que el orden de jerarquía para establecer un estilo es:
  1. Archivo CSS.
  2. Etiqueta style del head.
  3. Atributo estile de la etiqueta (esto es lo que modifica el objeto style).

Reemplazando los últimos a los primeros en caso de repetirse un estilo para una etiqueta.


Si queremos ver el estilo de la etiqueta en cuestión no obstante tenemos el método getComputedStyle, compatible con la mayoría de los exploradores excepto la familia I.E. hasta la versión 9. Para el caso de que el usuario navegue con una versión anterior al I.E.9, existe el método currentStyle, que haría lo mismo.

En la función de ejemplo se muestra una función que recibiendo un elemento y un estilo, devolvería su valor, lo que hace es:
  1. Comprueba si el navegador puede usar getComputedStyle y devuelve el estilo.
  2. Si no, comprueba si el navegador puede usar currentStyle en cuyo caso devuelve el estilo con este método.
  3. En caso de que el navegador no pueda usar ninguna de los 2 métodos devuelve el valor del objeto style.

Para llamarla sería algo como:
// Para recoger el color del texto de una etiqueta con id = pp (<p id="pp">Hola</p>)
sEstilo(document.getElementById('pp'), 'color');

// Para recoger el color de fondo de la página (body)
sEstilo(body, 'backgroundColor');


Por último recordar que se le puede asignar una clase (class) a un estilo con la propiedad clasName, sería algo así:
// Para asignar un estilo a una etiqueta con id = pp (<p id="pp" class="clase1">Hola</p>)
document.getElementById('pp').className = "clase2";

// Para ver la clase de la etiqueta con id = pp
alert(document.getElementById('pp').className);


En el HEAD:
<script language="javascript">
// Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente<!--
// Copyright © McAnam.com
// http://www.mcanam.com/articulos/JavaScript.php?id=29

    function sEstilo(elemento, estilo){
        
        if (window.getComputedStyle)
            return window.getComputedStyle(elemento, null).getPropertyValue(estilo);
        else if(document.body.currentStyle)
            return elemento.currentStyle[estilo];
        else
            return elemento.style[estilo];
        
    }
//-->
</script>

Links relacionados:
Artículos de estilos
Como usar los estilos
Cambiar el tipo de cursor una vez cargada la página
Calendario Dinámico con JavaScript y Estilos
Etiqueta desplazándose por el explorador


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com