Javascript 如何切换外部CSS文件？_Javascript_Jquery_Css_Ajax

Javascript 如何切换外部CSS文件？

javascript jquery css ajax

Javascript 如何切换外部CSS文件？,javascript,jquery,css,ajax,Javascript,Jquery,Css,Ajax,我有几本关于AJAX的书，但还是很新。所有的教程和这些书都有无处不在的例子：自动填充搜索栏和异步表单验证程序。它们都很棒，但不是我想要的。具体地说，我想单击一个按钮并在我的头include中切换外部CSS文件。这可能吗？好。。。我知道这是可能的，但你是怎么做到的 PS：我在这个项目中有jQuery，所以如果有内置的东西，那就更好了 PPS：我意识到我没有包括重要的信息（不要开枪！）最终的目标是有一个用户设置部分，用户可以点击单选按钮，并决定他们想要用于我们的应用程序的配色方案。因此，我们最终将

我有几本关于AJAX的书，但还是很新。所有的教程和这些书都有无处不在的例子：自动填充搜索栏和异步表单验证程序。它们都很棒，但不是我想要的。具体地说，我想单击一个按钮并在我的头include中切换外部CSS文件。这可能吗？好。。。我知道这是可能的，但你是怎么做到的

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

PPS：我意识到我没有包括重要的信息（不要开枪！）

最终的目标是有一个用户设置部分，用户可以点击单选按钮，并决定他们想要用于我们的应用程序的配色方案。因此，我们最终将有8种不同的CSS样式可供选择。不确定这是否会改变实现这一目标的最佳方法

用户正在登录其帐户并更改其设置。我希望他们的更改保持不变，直到他们决定再次更改样式表。我可以在MySQL中手动执行此操作，因为我们有一个名为stylesheets的表，其中包含编号为的各种用户样式表。。。所以实际上，我需要做的是异步更改MySQL值，以便立即加载CSS

要向页面添加新的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<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/);

函数删除（搜索）{
var css=document.getElementsByTagName（'link'）；
对于（var i=0；i将id
属性添加到CSS链接
标记，以使用JavaScript操作标记：
<link id="cssfile" href="css/avocado.css" type="text/css" rel="stylesheet">

用户可以通过单击链接调整颜色：
<a href="#"
 onclick="document.getElementById('cssfile').href='css/carrot.css';">Carrots</a>



通过更改媒体类型，用户还可以快速更改打印版面、手机（或平板电脑）上的首选版面等
此解决方案不需要jQuery
另请参见：
它与Ajax无关。它与JS和DOM操作（搜索教程的一些关键词）有关。

我正在使用Mootools，这是一个JS库，它有一个内置函数
如果手动操作是您的事情，那么我只需将
元素添加到
或调整现有
元素的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>


...
...
...
document.getElementById（'bobo'）。href=”http://my.doamin.com/new.css";
下面是一个使用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>


$（函数（）{
$（“#更改css”）。单击（函数（e）{
e、 预防默认值（）；
$（'link[rel=“stylesheet”]'）.attr（'href'，'style2.css'）；
});
});

操作行是$（'link[rel=“stylesheet”]”）。attr（'href'，'style2.css'）；
。这将查找任何具有rel=“stylesheet”
的
标记，并在jQuery中将其href
属性更改为style2.css
样式表切换器。
作为对“新手跟进”评论的回应，我将尝试让它更具指导性
我在写作时玩的测试页面可以找到
页面显示
您需要在每个页面的
中的
标记中显示当前样式表。
标记需要一个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' />

实时显示
此时，您已经为没有javascript的跛脚人提供了一个功能强大的styleswitcher。现在，您可以添加一些jQuery，使这一切更优雅地发生。您需要使用创建一个漂亮的ajaxForm（）
函数，该函数将处理表单提交。将jQuery和jQuery表单库添加到页面：
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.form.js'></script>

您还可以加载CSS文件，并在第二个文件的所有选择器前面加上一个主体类名称
body.secondsheet {}
body.secondsheet a {}
body.secondsheet hr {}

那么您所要做的就是添加/删除“第二张工作表”类添加到body标记以切换样式表。
我会将其添加到head而不是body，除此之外，看起来不错。除了样式之外，没有理由将其添加到head而不是body。由于这是一个实时DOM，没有Firebug之类的东西，没有人会注意到样式方面。将其添加到body更简单。因为没有像document.head
这样的东西，将其附加到head是一件单调乏味的事情：document.getElementsByTagName（'head'）[0]。正文中不允许使用appendChild链接元素。依靠浏览器执行错误恢复不是一个好主意（即使当前裁剪在这种特定情况下始终如此）@David:Oops，错过了。修复了符合HTML规范的代码。如果元素在标题中，getElementById是否会执行事件？为我的新手后续问题道歉1）为了完成这一点，我需要一个styleswitch按钮，对吗？你能给我一个简单的按钮示例和代码吗？2）我能将保存功能与第一个按钮结合起来吗？即：理想情况下，用户只需单击按钮，css就会改变，它们就完成了（或者他们单击另一种颜色，然后就完成了）.我相信我已经回答了所有的问题…如果你还有其他的后续问题，也许值得问一个新问题
$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();
  }
}

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

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