feed twitter facebook LinkedIn facebook

JavaScript » Cambiar estilos dinámicamente

septiembre 12, 2009 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Desde que se pueden aplicar hojas de estilos en las páginas web se ha entrado en una dinámica en la cual los elementos de la página cambian de color, forma, aparecen y desaparecen, atendiendo a eventos de la propia página. Estos cambios son posibles gracias a que se pueden modificar las propiedades del estilo de un elemento.

Si queremos cambiar el estilo de un determinado objeto de la página dinámicamente. Entendiendo como objeto, cualquier elemento de la página identificado mediante un ID. Tenemos dos posibilidades:

Cambiar una a una cada una de las clases asociadas al estilo. Por ejemplo, el siguiente código realiza dicha función...

  1. objeto.style.color='#003366';
  2. objeto.style.fontFamily='Verdana,Arial,Helvetica,sans-serif';
  3. objeto.style.fontSize='12px';
  4. objeto.style.textDecoration='none';
  5. objeto.style.backgroundColor='#419ad4';

O bien, aplicar un estilo directamente sobre el objeto. Esta segunda forma es mucho más rápida y eficiente. Además, nos permite tener controlados los estilos de la aplicación web y que no se defina un nuevo estilo dentro del código de la página. En este caso deberemos de asignar un estilo a la propiedad className del objeto...

  1. objeto.className='estilo';

El estilo puede estar definido directamente en la misma página o importado de una hoja de estilos. Cuando queremos aplicarselo a un objeto del documento utilizamos el ID y el método .getElementById() para acceder al elemento. La función Javascript genérica quedaría de la siguiente forma:

  1.  
  2. <script type="text/javascript">
  3. function cambiarHojaEstilos (id,estilo) {
  4. document.getElementById(id).className=estilo;
  5. }
  6. </script>
  7.  
Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre JavaScript
Foro sobre JavaScript
tags: , , , , , , , ,

Artículos relacionados:

1 comentario »

RSS feed para los comentarios de esta entrada. TrackBack URI

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*