¿Cómo cambio mi hoja de estilo CSS usando jQuery?

Lo que estoy trabajando es simple.¿Cómo cambio mi hoja de estilo CSS usando jQuery?

Haz clic en un botón (id="themes") y abre un div (id="themedrop") que se desliza hacia abajo y enumera los temas. (Sólo tengo dos en este punto)

<button id="original">Original</button><br /> 
<button id="grayscale">Grayscale</button>

Ahora, cuando el sitio se carga se carga con style1.css (tema principal/Original)

<link rel="stylesheet" type="text/css" href="style1.css">

Ahora lo que estoy tratando de averiguar es ... Cómo puedo tenerlo cuando se hace clic en el botón de escala de grises para cambiar la hoja de estilo de style1.css a style2.css (nota: los archivos están en el mismo directorio)

Cualquier ayuda sería muy apreciada.

Fuente

2011-10-21 Michael Schwartz

$('#grayscale').click(function(){ 
    $('link[href="style1.css"]').attr('href','style2.css'); 
}); 
$('#original').click(function(){ 
    $('link[href="style2.css"]').attr('href','style1.css'); 
});

Pruébalo pero no estoy seguro de si funcionará No lo he probado, pero gd suerte.

Fuente

2011-10-21 08:43:29 Val

Gracias esto me ayudó a salir (versión modificada): --- $ ("# botón de escala de grises") haga clic en (function() {$ \t ("link [rel = hoja de estilo]") attr.. ({href: "style2.css"}); }); –

sí, tiene razón, 'attr ('href')' lol, lo siento, por cierto no necesita el botón delante del selector seguido del selector de id, ya que los ID deben ser únicos según las especificaciones y no debe tener ID duplicados , de ahí que usemos las clases :) – Val

Nice answer. Si solo se trata de 2 variantes. No funcionará para 3 hojas de estilo. – Jay

Le sugiero que proporcione link -etiqueta como tema. Poner el nombre del archivo CSS en un -attribute data en los botones y utilizar el mismo controlador en ellos tanto:

HTML:

<link id="theme" rel="stylesheet" href="style1.css"> 

<button id="grayscale" data-theme="style2.css">Gray Theme</button>

y JS:

$("button[data-theme]").click(function() { 
    $("head link#theme").attr("href", $(this).data("theme")); 
}

Fuente

2011-10-21 08:52:33 Tetaxa

forma rápida hacerlo es,

<link id="original" rel="stylesheet" type="text/css" href="style1.css"> 
<script> 
function turnGrey(){ 
document.getElementById("original").href="grey.css";<!-- what ever your new css file is called--> 
} 
</script> 
<button id="grey" onclick="turnGrey">Turn Grey</button><br />

Fuente

2012-11-21 17:09:42 none

Utilice esta:

<link href="Custom.css" rel="stylesheet" /> 
<link href="Blue.css" rel="stylesheet" /> 
<link href="Red.css" rel="stylesheet" /> 
<link href="Yellow.css" rel="stylesheet" /> 



<select id="changeCss"`enter code here`> 
     <option onclick="selectCss(this)" value="Blue">Blue</option> 
     <option onclick="selectCss(this)" value="Red">Red</option> 
     <option onclick="selectCss(this)" value="Yellow">Yellow</option> 
    </select> 

<script type="text/javacript"> 
function selectCss() { 
      var link = $("link[rel=stylesheet]")[0].href; 
      var css = link.substring(link.lastIndexOf('/') + 1, link.length) 
      $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css'); 
     } 
</script>

Fuente

2014-09-17 08:02:02

¿Cómo cambio mi hoja de estilo CSS usando jQuery?

Respuesta

Cuestiones relacionadas