Cambiar Estilos CSS o JavaScript

Javascript nos permite cambiar las propiedades de un objeto usando la sintaxis objeto.propiedad=valor así que cambiando la propiedad href de la etiqueta <link> que enlaza los archivos CSS el estilo especificado se cargará.

Primero, crearemos un enlace al estilo CSS por defecto asignándole un identificador :

<link href="css/defecto.css" rel="stylesheet" type="text/css" id="estilo">

Despues crearemos en Javascript la función que cambiará el estilo. Funciona pasándole como único argumento el nombre o ruta completa del archivo CSS a mostrar. Usaremos la propiedad getElementById() para identificar el objeto:

function estilo(arquivo) {
    document.getElementById('estilo').href=arquivo;
}

Y finalmente sólo tendremos que llamar a la función desde un enlace o botón pasándole como argumento el nombre o ruta del arquivo CSS que queramos mostrar:

<input type="buton" value="Cambiar Estilo" onClick="estilo('azul.css');">

Podeis comprobar el funcionamento del script en la sección Opciones del menú de la derecha.



Autor: David Martínez
http://dmnet.bitacoras.com/index.php?id=2

Usuarios que han visto este tema también han visto...

- Averiguar el zoom en un mapa de Google Maps
- MozAfterPaint, evento para controlar los cambios en la página
- Evitar el Reenvío de Formularios con JavaScript
- Precargar Imagen con JavaScript
- Deshabilitar minimizar en JavaScript

- Versión imprimible de este documento
- Enviar por e-mail este documento