特定のDIV用の外部CSSをロード

Question

だから、基本的に私は自身のCSSを持っているページを持っています。私のサーバーには、さまざまなCSSスタイルのファイルのフォルダがあります。そのため、自分のページに「プレビュー」ウィンドウを表示します。どういうわけか、多分javascriptを使用して、カスタムCSSファイルの「プレビュー」を得ることができるように、ページ全体ではなく、特定のDIVにのみ外部CSSファイルを適用できますか？私はむしろiframeを使用しないでください。

Answer 1

CSSはドキュメント全体に適用されます。

スコープを制限する場合は、子孫セレクタを使用する必要があります。

#id_of_div .the .rest .of .the .selector {}

あなたはまたのためにスタイルシートを見つけるだろう、すべてのセレクタにこれを適用する必要があり、そのアカウントgroupsに取る（それだけで全体のスタイルシートを前に置くと、すべての}接尾辞を付けるように単純ではありません）

メイン文書をプレビューに適用します。

おそらくフレームがこの問題を解決するための最良の方法でしょう。

Answer 2

プレビューページを読み込むためにiframeを使用したり、CSSをページに動的に読み込んだりすることができます。しかし、スタイルをdivにのみ適用する場合は、CSSセレクタの前にdivのidを付ける必要があります。 #div-id #element-inside-div { }。

それをロードするためのスクリプトは次のようになります。

var cssFile = document.createElement("link"); 
cssFile.rel = "stylesheet"; 
cssFile.type = "text/css"; 
cssFIle.href = "file.css"; 
document.getElementsByTagName("head")[0].appendChild(cssFile); 

Answer 3

クエンティンあなたは範囲を限定するために子孫セレクタを使用することができ、言ったように。 lessのようなものは多くを助けることができます。例えば、私は「my.less」で、「bootstrap.cssは」のみ#MyDivに適用したいと思います：

#MyDiv { 
    @import "bootstrap.less"; 
} 

「bootstrap.cssは」「bootstrap.lessに名前を変更（またはリンク）しなければなりません"実行：

lessc my.less my.css 

インポートしたファイルのすべてのセレクタに#MyDivを追加します。

Answer 4

私のプロジェクトの1つとして、同じことが必要でしたが、CSSバージョン2でもサポートされていました。
ウェブ全体で長い検索をした結果、何も役に立たなかったので、 DOM内の特定のElementにCSS全体を実際に適用できるJavaScriptを使用してこの機能を作成しました。以下に説明するように

ジャスト（jQueryライブラリに依存）、関数applyCSSFileToElementを呼び出す：

function renderCSSForSelector(css, selector) { 
    return ((css+"")||"").replace(/\n|\t/g, " ") 
     .replace(/\s+/g, " ") 
     .replace(/\s*\/\*.*?\*\/\s*/g, " ") 
     .replace(/(^|\})(.*?)(\{)/g, function($0, $1, $2, $3) { 
     var collector = [], parts = $2.split(","); 
     for (var i in parts) { 
      collector.push(selector + " " + parts[i].replace(/^\s*|\s*$/, "")); 
     } 
     return $1 + " " + collector.join(", ") + " " + $3; 
    }); 
} 

function applyCSSToElement(css, elementSelector) { 
    $("head").append("<style type=\"text/css\">" + renderCSSForSelector(css, elementSelector) + "</style>"); 
} 

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) { 
    callbackSuccess = callbackSuccess || function(){}; 
    callbackError = callbackError || function(){}; 
    $.ajax({ 
     url: cssUrl, 
     dataType: "text/css", 
     success: function(data) { 
      applyCSSToElement(data, elementSelector); 
      callbackSuccess(); 
     }, 
     error: function(jqXHR) { 
      callbackError(); 
     } 
    }) 
} 

機能の説明：

• renderCSSForSelector - 実際には、各スタイル定義のためのセレクタを付加します。
• applyCSSToElement - CSSソースデータを受け取り、renderCSSForSelectorを適用してHEADタグに挿入します。
• applyCSSFileToElementは - DOM内の特定の領域（elementSelector）にCSSファイル（cssUrl）を適用します。ファイルが正常にロードされ、CSSが適用されたときcallbackSuccessが呼び出されます。 CSSファイルをロード中にエラーが発生したときcallbackErrorが呼び出されます。

幸運！