如何使用jQuery切换我的CSS样式表?

我正在做的事很简单。

你点击一个button(id="themes") ,它打开一个div (id="themedrop") ,下滑并列出主题。 (我现在只有两个)

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

现在,当这个网站被加载时,它会加载style1.css(主/主题)

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

现在我想弄清楚的是…我怎么能这样做,当灰色button被点击更改样式表从style1.css到style2.css(注:文件在同一目录中)

任何帮助将非常感激。

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

试试这个,但不知道它是否会工作我还没有testing它,但钆运气。

我会build议你给link标签,如主题。 将css文件的名称放在button上的data属性中,并在它们上使用相同的处理程序:

HTML:

 <link id="theme" rel="stylesheet" href="style1.css"> <button id="grayscale" data-theme="style2.css">Gray Theme</button> 

和js:

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

快速的方法是,

 <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 /> 

用这个 :

 <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>