Delirios de un Informático

Cambiar estilos CSS con JavaScript

Una de las ideas que tenía a la hora de programar esta bitácora era la de poner a disposición de los visitantes varios estilos CSS. El problema era aplicar el estilo sin tener que recargar la página completamente. La solución la encontré en 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.

3 thoughts on “Cambiar estilos CSS con JavaScript”

Alex dice:

Asias.. lo he utilizao y va de pm ^_^
solo una cosilla, en :

no es “buton” sino “button”….xD que me ha rallao un ratilloa 😉

Alex dice:

Vuelvo a ser yo xD resulta que no me va tan bien como decia…
de exo al clicar en el boton me deja sin estilo pero no ecnuetra el otro CSS. Parece que el error se ade la ruta, pero no es asi, no hay ningun otro error sintáctico?
Gracias

Ka2 dice:

hola el script lo he encontrado gracias a webtaller.com y quisiera saber como puedo pasarlo a PHP, lo he intentado y me falla en cambiar de estilo. dejo aki el code para entederlo mejor:
Code PHP:
< ?php function menu_estilos_css($estilo) { if(is_array($estilo)) { echo "