Tupale

Cambiar la hoja de estilos de tu web con javascript

Bueno este es un simple tip, un pequeño truco para cambiar la hoja de estilos de una pagina web con un solo click usando javascript.

Es muy útil si quieres darle varias vistas a tu sitio web o acoplar diseñados diferentes para que sea el usuario el que decida como quiere ver la web.

bueno vamos con el truco rápido, consiste simplemente en crear un botón  que llame una función javascript que su vez selecciona la hoja de estilos y la aplica al documento.

La función javascript es tan simple como esto:

<script language=”javascript”>
function estilo(arquivo) {
document.getElementById(‘estilo’).href=arquivo;
}
</script>

y los botones que llaman la funcion serian de la siguiente manera:

<input type=”button” value=”Cambiar Estilo” onClick=”estilo(‘estilo2.css’);”>
<input type=”button” value=”Cambiar Estilo” onClick=”estilo(‘estilo1.css’);”>

Como vez es muy sencillo, utilizando la propiedad onClick de javascript llamamos al función estilo y en la variable “arquivo” ingresamos el nombre de la hoja de estilos que queremos vincular.

Mantener la navegacion con la misma hoja de estilos.

Pues como ven con el tip anterior el usuario podrá seleccionar su hoja de estilos, el problema es que cada vez que cambie de pagina volver al estilo por defecto. La forma facil de corregir esto es usando cookies y una llamda de PHP.

<link href=”<?PHP $_COOKIE[‘estilo’]; ?>” rel=”stylesheet” type=”text/css” id=”estilo”>

De esta manera la hoja de estilo por defecto sera la que este seleccionada en la cookie “estilo”. pero ahora debemos hacer que al dar click en uno de los botones se asigne el valor de la hoja de estilos a la cookie “estilo”, lo que hacemos con una sola linea de código en la función javascript.

<script language=”javascript”>
function estilo(arquivo) {
document.getElementById(‘estilo’).href=arquivo;
document.cookie=”estilo = “+arquivo+”; expires = 2 Dec 2012 23:59:59 GMT”
}
</script>

Espero que les sirva el tip, cualquier duda o recomendación pueden hacerla a través de los comentario o del foro.

2 comments for “Cambiar la hoja de estilos de tu web con javascript

  1. fercho
    31 marzo, 2014 at 5:23 PM

    si cambio la hoja de estilos con un click y me conserva el estilo por cache

    pero tengo un problema si quiero inicializar con una hoja de estilos de alguna de las dos escojidas

    como lo hago
    gracias

    • 24 octubre, 2014 at 10:31 AM

      mi comentario no es de ayuda pero intento hacer algo parecido, me podrías decir como solucionaste tu problema?? , agradecería mucho tu ayuda!!

Deja un comentario

A %d blogueros les gusta esto: