96

ページをリロードしなくてもスタイルシートをリロードして適用するプレビュー機能を備えたライブのページ内 CSS エディターを作成しようとしています。これについて最善の方法は何ですか？

4

13 に答える 13

113

あなたの状況には当てはまらない可能性がありますが、外部スタイルシートをリロードするために使用するjQuery関数は次のとおりです。

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}
于 2010-01-08T00:01:59.893 に答える
51

「編集」ページで、CSS を通常の方法で (<link>タグを使用して) 含めるのではなく、すべてタグに書き込みます<style>。そのプロパティを編集するinnerHTMLと、サーバーへのラウンドトリップがなくても、ページが自動的に更新されます。

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

jQuery を使用した Javascript:

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

そして、それだけです！

本当に派手にしたい場合は、関数をテキストエリアのキーダウンにアタッチしますが、不要な副作用が発生する可能性があります (入力するとページが絶えず変化します)。

編集：テスト済みで動作します（少なくともFirefox 3.5では、他のブラウザでは問題ないはずです）。ここでデモを参照してください: http://jsbin.com/owapi

于 2010-01-07T23:44:01.697 に答える
9

Andrew Davey のおしゃれな Vogue プロジェクトをチェックしてください - http://aboutcode.net/vogue/

于 2011-07-10T00:15:43.023 に答える
6

もう 1 つの jQuery ソリューション

ID「css」を持つ単一のスタイルシートの場合、これを試してください：

$('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');

これをグローバル スコープを持つ関数にラップすると、Chrome の開発者コンソールまたは Firefox の Firebug から使用できます。

var reloadCSS = function() {
  $('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
};
于 2014-04-07T20:05:04.173 に答える
0

php を使用している場合は簡単です。css の最後に現在の時刻を追加するだけです。

<link href="css/name.css?<?php echo 
time(); ?>" rel="stylesheet">

だから今、何かをリロードするたびに、時間が変わり、最後のビットが変化し続けるため、ブラウザは別のファイルと見なします....任意のファイルに対してこれを行うことができます。任意のスクリプト言語を使用してブラウザを常に更新するように強制します。

于 2019-07-23T07:26:32.233 に答える
0

私は今これを持っています：

    function swapStyleSheet() {
        var old = $('#pagestyle').attr('href');
        var newCss = $('#changeCss').attr('href');
        var sheet = newCss +Math.random(0,10);
        $('#pagestyle').attr('href',sheet);
        $('#profile').attr('href',old);
        }
    $("#changeCss").on("click", function(event) { 
        swapStyleSheet();
    } );

新しいcss URLを含むhref属性を使用して、idがchangeCssのページ内の要素を作成します。および開始 css を持つ link 要素:

<link id="pagestyle" rel="stylesheet" type="text/css" href="css1.css?t=" />

<img src="click.jpg" id="changeCss" href="css2.css?t=">
于 2014-11-04T11:28:23.373 に答える
-1

はい、cssタグをリロードします。また、新しいURLを一意にすることを忘れないでください（通常はランダムなクエリパラメータを追加します）。私はこれを行うためのコードを持っていますが、今は私と一緒ではありません。後で編集します...

編集：遅すぎます...hartoとnickfは私をそれに打ち負かしました;-)

于 2010-01-07T23:35:56.247 に答える