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...

- Contadores de Fecha
- Un script en Javascript que detecta el navegador del visitante
- Escribir texto vertical en JavaScript
- Establecer conexiones al puerto Http con el objeto XMLHttp
- Función createElement y appendChild en Javascript

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