Delirios de un Informático

Delirando sobre informática, fotografía, programación, móviles y mucho más desde 2003

Cambiar estilos CSS con JavaScript

votar
Archivado en JavaScript con fecha 22/Sep/2003 - 3 comentarios

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.

Antes de comentar...

Puedes escribir lo que quieras, pero por favor hazlo respetando a los demás y en relación al tema que se está tratando. Todo comentario insultante o fuera de lugar será eliminado

Está permitido utilizar las siguientes etiquetas HTML para formatear tu comentario: <a> <b> <blockquote> <i> <u>. Además también puedes utilizar estos emoticonos:

:) :( :'( :P ;) :D XD :O :S 8) :$ (A) (L) (K) |) (6) :@ +o( :|

Puedes enviar referencias a esta anotación utilizando esta dirección

Comentarios

Alex dijo hace 1878 días:

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 dijo hace 1878 días:

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 dijo hace 1498 días:

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 "

Haz tu comentario

Nombre Correo electrónico Página web

Delirios de un Informático :: Gestionado con WordPress :: Alojado en Bitacoras.com :: Licenciado bajo Creative Commons