Cambiar la hoja de estilos (Css) dinámicamente con Javascript

css mas ajax

Hoy vamos a mirar cómo cambiar el archivo de estilo (.css) de una web por medio de Javascript.

Esto puede servir en el momento digamos que hagas una aplicación web y necesites cambiarle el tema o si necesitas que una web se vea distinta con otro tipo de archivo Css.

Primero veamos el código:

index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”es-ES” lang=”es-ES”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>P&aacute;gina web de Pedrito P&eacute;rez</title>
<link href=”archivoCss1.css” id=”cssArchivo” rel=”stylesheet” type=”text/css” />
<script src=”javascript.js” type=”text/javascript”></script>
</head>
<body>
<h1>Esta es mi web, me alegro que est&eacute;s aqu&iacute; :D</h1>
<img src=”ajaxFoto.jpg” alt=”Imagen de Css + Ajax = Otro Css”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisl nibh, egestas at ullamcorper interdum, consequat et metus. Vestibulum mattis est non dolor pharetra vel faucibus augue interdum. Ut ac nibh vitae odio ornare volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium pretium orci at tempor. Ut convallis sagittis facilisis. In hac habitasse platea dictumst. Pellentesque rhoncus sapien vitae massa consequat consectetur. Praesent auctor fermentum arcu in accumsan. Cras vel tortor elit, ac viverra massa. Curabitur quis ipsum nulla. Etiam iaculis leo mi, et porttitor est. Mauris ornare rutrum velit, sit amet blandit ante semper nec. Proin bibendum neque sed quam ornare nec vulputate ligula pharetra. Curabitur porttitor orci rutrum nulla feugiat vehicula. Integer ante ante, interdum ut luctus ut, faucibus sed ligula. Donec eu purus sed sapien adipiscing sollicitudin blandit eu eros.</p>
<a href=”#” onclick=”cambiarArchivoCss(‘archivoCss1.css’);” title=”Cambiar a estilo 1″>Cambiar a estilo 1</a><br/>
<a href=”#” onclick=”cambiarArchivoCss(‘archivoCss2.css’);” title=”Cambiar a estilo 2″>Cambiar a estilo 2</a><br/>
<a href=”#” onclick=”cambiarArchivoCss(‘archivoCss3.css’);” title=”Cambiar a estilo 3″>Cambiar a estilo 3</a><br/>
</body>
</html>

Si vemos, con el código llamamos a un archivo “Javascript”, el cual contiene la función que necesitamos llamada “cambiarArchivoCss”.

<script src=”javascript.js” type=”text/javascript”></script>

Ahora miramos cómo llamamos a el archivo Css:

<link href=”archivoCss1.css” id=”cssArchivo” rel=”stylesheet” type=”text/css” />

Si analizamos, a esta etiqueta la llamé “cssArchivo”, es para después usar la función.

javascript.js

function cambiarArchivoCss(archivo) {
document.getElementById(‘cssArchivo’).href=archivo;
}

archivoCss1.css

body{
font-family: Arial, ‘Lucida Sans Unicode’, Helvetica, sans-serif;
}
h1{
color:#496200;
}
p{
color:#000;
}
img{
border:3px solid red;
}

archivoCss2.css

body{
font-family: ‘Lucida Sans Unicode’, Helvetica, sans-serif;
background:#FF9900;
}
h1{
color:#FFF;
}
p{
color:#000;
}
img{
border:10px outset yellow;
}

archivoCss3.css

body{
font-family: Georgia;
background:#CCCCCC;
}
h1{
color:#333;
}
p{
color:#333;
}
img{
border:4px double blue;
}

Y Listo, a continuación les dejo los enlaces para que vean el Demo o también descarguen el código:

Demo

Descargar código

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , ,
Publicado en ajax, css, Css para principiantes, html, javascript, manuales, programacion, Trucos css
12 comments on “Cambiar la hoja de estilos (Css) dinámicamente con Javascript
  1. pedro perez dice:

    Don estándares, en el estandar XHTML está prohibido incluir código javascript en atributos de tags…

    • Don Estándares dice:

      Sí, gracias por la aclaración, pero como es un ejemplo rápido. sino podría confundir un poco más, pero gracias por el comentario, lo tendré en cuenta para la próxima

  2. Hola.
    Pienso que debes hacer una de dos cosas: o bien, cambiar el nombre de tu artículo o cambiar el enfoque del mismo. ¿Porqué? En ningún momento estás utilizando ajax. No utilizas el objeto XMLHttpRequest ni directamente ni por medio de alguna librería.

    Te estás limitando únicamente a cambiar el archivo de hoja de estilos asociado a la página mediante una única instrucción en javascript, y eso en ningún momento es ajax, no hay llamados asíncronos, no hay objeto XMLHttpRequest, no hay tecnología de servidor, NO HAY AJAX.

  3. Moises Nuñez dice:

    Antes que nada saludos amigo, nomas un Tip respecto a tu blog, en la pagina principal reduce el numero de temas visto por pagina, o simplemente inserta un “” en tus temas, es tedioso tener que bajar todos tus temas que tienes, se ve demasiadio sucio, y como es mucho texto llega a ser molesto, el querer ver entradas anteriores!

    Saludos amigos es solo un tip!

    • Don Estándares dice:

      ¡Gracias! 😛 lo que pasa es que tenía un theme viejo anteriormente y ya era hora de cambiarlo, tendré en cuenta tu sugerencia.

  4. PeterNux dice:

    Cambiar la hoja de estilos (Css) dinámicamente con Javascript

    Está muy bien.
    A mí me sirvió y es muy útil.
    simple y sencilllo de implementar.
    Gracias!

    puedes verlo aquí en esta web que estoy haciendo.

  5. Enrique Lacherre dice:

    Estimado Don Estándares, no funcionan los link’s me gustaria mucho poder ver el ejemplo en funcuinamiento. Gracias

  6. gbrlccrs dice:

    muchas gracias me funciono muy bien, una consulta, alguien me puede ayudar con mantener el cambio de estilo en las otras paginas qe tenga mi sitio?? de antemano muchas gracias.

  7. jaime dice:

    Pesimo ejemplo

  8. Jose dice:

    Hola Don Estándares, un saludo. Primero quiero decirte que tienes una web con buenos contenidos que puede ayudarnos a los que siempre queremos aprender más sobre el desarrollo web. Pero, necesitas un sistema de paginación urgente en tu página de inicio. O mostrar un resumen de los post y que haya un botón que diga “ver más” Para así no hacer taaaan larga esa página. Suerte

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
A %d blogueros les gusta esto: