Cambiar estilos CSS con JavaScript - Cambiar estilos CSS con 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.