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 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');">
Autor: David Martínez - http://www.dmnet.bitacoras.com
luis manuel mogollon ramos dijo
Hola Sergio, lei tu comentario sobre el cambiar el css mediante javascript, yo estoy intentando hacer algo parecido, pero sin exito. Lo que sucede es que quiero que el javascript detecte la pantalla del navegador, y cargue la hoja de estilo respectiva, Intente hacer esto:
function resize() {
if (screen.width1024)
document.getElementById('estilo2');
}
Pero nada,.. no funciona, perdona mi ignorancia pero recien me he metido a este asunto del javascript y css, y el cliente me quiere matar, ojala puedas ayudarme. gracias de todos modos.
6 Agosto 2008 | 04:34 AM