0

因此，我早些时候发布了一个关于此的问题，在得到有用的回复后，我开始尝试尝试该代码。我以前没有使用过 JQuery，所以这对我来说是一个超越的一步。

我正在做的是使用下面的代码来更改网站的 CSS，几乎就像一个模板，但是，当按下按钮时，没有任何变化。我已经包含了链接到 Google 的 JQuery 脚本。代码本身很容易解释，当您按下按钮时，它应该加载不同的样式表。我不确定这是否是永久性更改，但只是测试一下。任何帮助表示赞赏！

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>

<script type="text/javascript">

$("button#grayscale").click(function() { 
    $("link[rel=stylesheet2]").attr({href : "css2.css"}); });

$("button#original").click(function() { 
    $("link[rel=stylesheet]").attr({href : "css.css"}); });
});


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

2 回答 2

2

我认为您应该遵循@undefined 的建议并将类前缀应用于您的所有规则。然后，您可以将该类应用于高处的元素，这意味着如果您更改类，一切都将遵循：

CSS：

body.grayscale div{
    color: gray;
}

body.normal div{
    color: green;
}

JS：

$("button#original").click(function() { 
    $("body").removeClass("grayscale"); 
    $("body").addClass("normal"); 
});

$("button#grayscale").click(function() { 
    $("body").removeClass("normal"); 
    $("body").addClass("grayscale"); 
});
于 2012-12-09T20:31:51.237 回答
0

像这样的东西会切换样式表，但不会是永久性的改变：

HTML：

<div id="theme-switcher">
    <button data-theme="css2.css">Greyscale</button>
    <button data-theme="css.css">Original</button>
</div>

jQuery：

$('#theme-switcher').on('click', 'button', function() {
    $('link[rel=stylesheet]').attr('href', $(this).data('theme'));
});

要使其永久化，您可以通过 AJAX 请求将值发送到服务器端脚本页面，该页面将值保存在数据库中。<link />然后可以从数据库服务器端提取该值，并在呈现标签时将其插入 HTML 。

使用示例 AJAX 更新了 jQuery：

$('#theme-switcher').on('click', 'button', function() {
    var theme = $(this).data('theme');

    // if it was a PHP based project
    $.post('save-theme.php', { theme: theme }).done(function() {
        $('link[rel=stylesheet]').attr('href', theme);
    });
});

save-theme.php 中发生的事情是服务器端的东西，所以很遗憾不是我的专业领域，对不起！

于 2012-12-09T23:41:34.197 回答