如何切换外部CSS文件？

Question

我有几本书，我正在阅读AJAX，但还是很新的。 所有教程和这些书都有无处不在的例子：自动填充搜索栏和异步表单验证器。 这些都很棒，但不是我想要的。 具体来说，我想单击一个按钮并在我的标题包中切换外部CSS文件。 这可能吗？ 嗯......我知道这是可能的，但是你怎么做的？

PS：我在这个项目中有jQuery，所以如果有内置的东西，那就更好了！

PPS：我意识到我没有收录重要信息（不要开枪！）：

最终目标是拥有一个用户设置部分，用户可以单击单选按钮并确定他们想要用于我们的应用程序的颜色方案。 所以我们最终会有8种不同的CSS样式可供选择。 不确定这是否会改变实现这一目标的最佳方法。
用户正在登录他们的帐户并在那里更改他们的设置。 我希望他们的更改能够“坚持”，直到他们决定再次更改样式表。 我可以在MySQL中手动执行此操作，因为我们有一个名为样式表的表，其中各种用户样式表都已编号...所以实际上，我需要做的是异步更改MySQL值，以便立即加载CSS。

Answer 1

将一个id属性添加到CSS link标记以使用JavaScript操作标记：

<link id="cssfile" href="css/avocado.css" type="text/css" rel="stylesheet">

设置href属性的Javascript类似于：

document.getElementById('cssfile').href = 'css/carrot.css';

用户可以通过单击链接调整颜色：

<a href="#"
 onclick="document.getElementById('cssfile').href='css/carrot.css';">Carrots</a>

通过更改媒体类型，这还可以允许用户快速更改打印布局，移动设备（或平板电脑）上的首选布局等。

此解决方案不需要jQuery。

另见： http ： //www.webmasterworld.com/forum91/4554.htm

Answer 2

jQuery中的样式表切换器。

为了回应“新手跟进”评论，我将尝试使其更具说明性。

我可以在这里找到我正在玩的用于测试的页面。

页面显示

您将希望将当前样式表显示在每个页面的<head>中的<link>标记中。 <link>标记需要一个id以供稍后在JavaScript中参考。 就像是：

<?php 
  // Somewhere in the server side code, $current_stylesheet is read from the user's 
  // "preferences" - most likely from a database / session object
  $current_stylesheet = $user->stylesheet;
?>
<link href='<?php echo $current_stylesheet ?>' rel='stylesheet' type='text/css' id='stylelink' />

改变偏好

显示用户样式表后，您需要一种方法来更改它。 创建一个<form> ，当用户更改样式表时，它将向服务器发送请求：

<form method="GET" id="style_form" >
  <select name="stylesheet" id="styleswitch">
    <option value="css1.css">Black &amp; White</option>
    <option value="css2.css" selected="selected">Shades of Grey</option>
   </select>
   <input value='save' type='submit' />
</form>

服务器端

现在，如果没有jQuery，提交此表单应该在当前页面上获取（如果您愿意，可以将其更改为POST） stylesheet={new stylesheet} 。 所以在你的bootstrap / sitewide包含文件的某个地方，你做了一个检查，一个php示例：

$styles = array(
  'css1.css' => 'Black &amp; 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();
  }
}

实时预览

在这一点上，你有一个功能齐全的styleswitcher为没有javascript的跛脚的人。 现在你可以添加一些jQuery来使这一切更优雅地发生。 你将需要使用jQuery Form Plugin来创建一个很好的ajaxForm()函数，它将处理提交表单。 将jQuery和jQuery表单库添加到页面：

<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.form.js'></script>

现在我们已经包含了库 -

$(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();
});

Answer 3

这是一个使用jQuery的例子。

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="style1.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $('#change-css').click(function(e){
                    e.preventDefault();
                    $('link[rel="stylesheet"]').attr('href', 'style2.css');
                });
            });
        </script>
    </head>
    <body>
        <a id="change-css" href="#">change css</a>
    </body>
</html>

操作行是$('link[rel="stylesheet"]').attr('href', 'style2.css'); 。 这将找到任何具有rel="stylesheet" <link>标记，并将其href属性更改为style2.css 。

Answer 4

它与Ajax无关。 它与JS和DOM操作（搜索教程的一些关键词）有关。
我正在使用Mootools，这是一个JS库，它有一个内置的功能。
如果手动执行此操作，那么我只需将<link>元素添加到<head>或调整现有<link>元素的href属性。

 <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6063" id='bobo'>
...
...
...
<script>document.getElementById('bobo').href="http://my.doamin.com/new.css";</script>

Answer 5

您还可以使用正文类名加载两个CSS文件并在第二个文件上添加所有选择器。

body.secondsheet {}
body.secondsheet a {}
body.secondsheet hr {}

然后，您所要做的就是在body标签中添加/删除“secondsheet”类以切换样式表。

Answer 6

要向页面添加新的css文件，只需创建一个新的<link>标记：

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文件，只需删除<link>即可：

function removeCss (search) {
    var css = document.getElementsByTagName('link');
    for (var i=0;i<css.length;i++) {
        var c = css[i];
        if (c.rel === 'stylesheet' || c.type === 'text/css') {
            if (c.href && c.href.match(search)) {
                c.parentNode.removeChild(c);
            }
        }
    }
}

// Remove all css that contains 'mycss_', can use regexp if necessary:
removeCss(/mycss_.*\.css/);

如何切换外部CSS文件？

问题描述

6 个解决方案

解决方案1
16 2010-01-19 02:30:36

解决方案2
4 已采纳 2010-01-19 03:19:04

jQuery中的样式表切换器。

页面显示

改变偏好

服务器端

实时预览

解决方案3
3 2010-01-19 02:33:06

解决方案4
1 2010-01-19 02:32:07

解决方案5
1 2010-01-29 19:59:07

解决方案6
0 2010-01-19 02:29:47

如何切换外部CSS文件？

问题描述

6 个解决方案

解决方案1 16 2010-01-19 02:30:36

解决方案2 4 已采纳 2010-01-19 03:19:04

jQuery中的样式表切换器。

页面显示

改变偏好

服务器端

实时预览

解决方案3 3 2010-01-19 02:33:06

解决方案4 1 2010-01-19 02:32:07

解决方案5 1 2010-01-29 19:59:07

解决方案6 0 2010-01-19 02:29:47

解决方案1
16 2010-01-19 02:30:36

解决方案2
4 已采纳 2010-01-19 03:19:04

解决方案3
3 2010-01-19 02:33:06

解决方案4
1 2010-01-19 02:32:07

解决方案5
1 2010-01-29 19:59:07

解决方案6
0 2010-01-19 02:29:47