0

そのため、これについて以前に質問を投稿し、役立つ回答の後、コードを試してみました. 私はこれまで JQuery を使用したことがなかったので、これは私にとって一歩先を行くものでした。

私がやっていることは、以下のコードを使用して、ほとんどテンプレートのように Web サイトの 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 に答える