Artículos
Javascript

Cambiar estilos dinámicamente

12/Sep/2009

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…

objeto.style.color='#003366';
objeto.style.fontFamily='Verdana,Arial,Helvetica,sans-serif';
objeto.style.fontSize='12px';
objeto.style.textDecoration='none';
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…

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:


Código Fuente

Descárgate el código fuente de Cambiar estilos dinámicamente
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios