11107 Suscriptores al Feed del Blog
87 Suscriptores al Feed de Anotaciones Breves
30 usuarios online
Mauricio Campos en 50 preguntas y respuestas de entrevistas de trabajo
Crear un style switcher o alternador de estilos
0 COMENTARIOS - Publicado hace 40 meses - Clasificado en: CSS, DOM, TUTORIALESEn un post anterior vimos como "Cambiar de clase CSS de un elemento con DOM". En este vamos a ir un poco más allá y crear un "style-switcher" o alternador de estilos. Lo primero que debemos tener es 2 o más estilos, cada uno de ellos con su propio titulo. Uno de ellos con rel="stylesheet", que será el que coja por defecto y los otros dos con rel="alternate stylesheet":
<link href="css1.css" rel="stylesheet" type="text/css" title="css1"/> <link href="css2.css" rel="alternate stylesheet" type="text/css" title="css2"/>
Posteriormente debemos tener una función Javascript que se encargue de cambiar de estilo, pasándole como parámetro el título del mismo:
function EstablecerCSS(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title)
a.disabled = false;
}
}
}
Y ahora tan sóllo queda llamar a la función en el HTML:
<div id="enlaces">
<a href="javascript:EstablecerCSS('css1');">Estilo 1</a>
<a href="javascript:EstablecerCSS('css2');">Estilo 2</a>
</div>
Ver ejemplo en funcionamiento » »
Algunas entradas relacionadas:
También te puede interesar:
Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.
|
|
|
|
|
