Question

所以我之前发布了一个关于此问题的问题，在有用的回复后，我开始尝试尝试代码。我之前没有使用过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>

Answer 1

我认为您应该遵循@ 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"); 
});

Answer 2

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

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中发生的事情是服务器端的东西，所以不幸的是我的专业领域，对不起！

JQuery CSS Changer无法正常运行

2 个答案: