如何切换外部CSS文件？
我有几本书，我正在阅读AJAX，但仍然很新。 所有教程和这些书都有无处不在的例子：自动填充搜索栏和异步表单validation器。 这些都很棒，但不是我想要的。 具体来说，我想单击一个按钮并在我的标题包中切换外部CSS文件。 这可能吗？ 嗯……我知道这是可能的，但是你怎么做的？
PS：我在这个项目中有jQuery，所以如果有内置的东西，那就更好了！
PPS：我意识到我没有收录重要信息（请勿拍我！）：
-
最终目标是拥有一个用户设置部分，用户可以单击单选按钮并确定他们想要用于我们的应用程序的颜色方案。 所以我们最终会有8种不同的CSS样式可供选择。 不确定这是否会改变实现这一目标的最佳方法。
-
用户正在登录他们的帐户并在那里更改他们的设置。 我希望他们的更改“坚持”，直到他们决定再次更改样式表。 我可以在MySQL中手动执行此操作，因为我们有一个名为样式表的表，其中各种用户样式表编号…所以实际上，我需要做的是异步更改MySQL值以便立即加载CSS。
jQuery中的样式表切换器。
为了回应“新手跟进”评论，我会尝试让它更具说明性。
我可以在这里找到我正在玩的用于测试的页面。
页面显示
您希望将当前样式表显示在每个页面的中的标记中。 标记需要一个id以供稍后在JavaScript中参考。 就像是：
stylesheet; ?>
改变偏好
显示用户样式表后，您需要一种方法来更改它。 创建一个
，当用户更改样式表时，它将向服务器发送请求：
服务器端
现在，如果没有jQuery，提交此表单应该GET（如果您愿意，可以将其更改为POST）当前页面上的stylesheet={new stylesheet} 。 所以在你的bootstrap / sitewide包含文件的某个地方，你要检查它，一个php示例：
$styles = array( 'css1.css' => 'Black & White', 'css2.css' => 'Shades of Grey', ); if (!empty($_GET["sytlesheet"]) { // VALIDATE IT IS A VALID STYLESHEET - VERY IMPORTANT // $styles is the array of styles: if (array_key_exists($_GET["stylesheet"], $styles)) { $user->stylesheet = $_GET["stylesheet"]; $user->save(); } }
实时预览
在这一点上，你有一个function齐全的styleswitcher为没有javascript的跛脚的人。 现在你可以添加一些jQuery来使这一切更优雅地发生。 你将需要使用jQuery Form Plugin来创建一个很好的ajaxForm()函数，它将处理提交表单。 将jQuery和jQuery Form库添加到页面：
现在我们已经包含了库 –
$(function() { // When everything has loaded - this function will execute: $("#style_form").ajaxForm(function() { // the style form will be submitted using ajax, when it succeeds: // this function is called: $("#thediv").text('Now Using: '+$('#styleswitch').val()); }); $("#styleswitch").change(function() { // When the styleswitch option changes, switch the style's href to preview $("#stylelink").attr('href', $(this).val()); // We also want to submit the form to the server (will use our ajax) $(this).closest('form').submit(); }); // now that you have made changing the select option submit the form, // lets get rid of the submit button $("#style_form input[type=submit]").remove(); });
在CSS link标记中添加id属性以使用JavaScript操作标记：
设置href属性的Javascript类似于：
document.getElementById('cssfile').href = 'css/carrot.css';
用户可以通过单击链接调整颜色：
Carrots
通过更改媒体类型，这还可以允许用户快速更改打印布局，移动设备（或平板电脑）上的首选布局等。
此解决方案不需要jQuery。
另见： http ： //www.webmasterworld.com/forum91/4554.htm
这是一个使用jQuery的例子。
change css
操作行是$('link[rel="stylesheet"]').attr('href', 'style2.css'); 。 这将找到任何具有rel="stylesheet" 标记，并将其href属性更改为style2.css 。
它与Ajax无关。 它与JS和DOM操作（搜索教程的一些关键词）有关。
我正在使用Mootools，这是一个JS库，它有一个内置的function。
如果手动执行此操作，那么我只需将元素添加到或调整现有元素的href属性。
... ... ...
您还可以加载两个CSS文件，并使用正文类名在第二个文件上添加所有选择器。
body.secondsheet {} body.secondsheet a {} body.secondsheet hr {}
然后，您所要做的就是在body标签中添加/删除“secondsheet”类以切换样式表。
要向页面添加新的css文件，只需创建一个新的标记：
function addCss (url) { var s = document.createElement('link'); s.rel = 'stylesheet'; s.type = 'text/css'; s.href = url; document.getElementsByTagName('head')[0].appendChild(s); } addCss('http://path/to/stylesheet.css');
要从页面中删除css文件，只需删除即可：
function removeCss (search) { var css = document.getElementsByTagName('link'); for (var i=0;i