jQuery中的样式表切换器。

Question

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

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

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

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

Answer 1

在CSS id标记中添加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中的样式表切换器。

在回应“新手跟进”评论时，我会尝试让它更具说明性。

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

页面显示

您希望将当前样式表显示在每个页面的<link>的{{1}}标记中。 <head>标记需要一个ID，以便稍后在JavaScript中引用。类似的东西：

<link>

更改首选项

显示用户样式表后，您需要一种方法来更改它。创建一个<?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>

服务器端

现在，如果没有jQuery，提交此表单应该GET（如果您愿意，可以将其更改为POST）<form method="GET" id="style_form" > <select name="stylesheet" id="styleswitch"> <option value="css1.css">Black & White</option> <option value="css2.css" selected="selected">Shades of Grey</option> </select> <input value='save' type='submit' /> </form>在当前页面上。所以在你的bootstrap / sitewide包含文件的某个地方，你要检查它，一个php示例：

stylesheet={new stylesheet}

实时预览

此时，你有一个功能齐全的样式开关，适用于没有javascript的跛脚人。现在你可以添加一些jQuery来使这一切更优雅地发生。您将需要使用jQuery Form Plugin创建一个很好的$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(); } }函数，它将处理提交表单。将jQuery和jQuery表单库添加到页面：

ajaxForm()

现在我们已经包含了库 -

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

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');。这会找到包含<link>的所有rel="stylesheet"代码，并将其href属性更改为style2.css。

Answer 4

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

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

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 个答案:

jQuery中的样式表切换器。

页面显示

更改首选项

服务器端

实时预览