だから、基本的に私は自身のCSSを持っているページを持っています。私のサーバーには、さまざまなCSSスタイルのファイルのフォルダがあります。そのため、自分のページに「プレビュー」ウィンドウを表示します。どういうわけか、多分javascriptを使用して、カスタムCSSファイルの「プレビュー」を得ることができるように、ページ全体ではなく、特定のDIVにのみ外部CSSファイルを適用できますか?私はむしろiframeを使用しないでください。特定のDIV用の外部CSSをロード
答えて
CSSはドキュメント全体に適用されます。
スコープを制限する場合は、子孫セレクタを使用する必要があります。
#id_of_div .the .rest .of .the .selector {}
あなたはまたのためにスタイルシートを見つけるだろう、すべてのセレクタにこれを適用する必要があり、そのアカウントgroupsに取る(それだけで全体のスタイルシートを前に置くと、すべての}
接尾辞を付けるように単純ではありません)
メイン文書をプレビューに適用します。
おそらくフレームがこの問題を解決するための最良の方法でしょう。
プレビューページを読み込むために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);
クエンティンあなたは範囲を限定するために子孫セレクタを使用することができ、言ったように。 lessのようなものは多くを助けることができます。例えば、私は「my.less」で、「bootstrap.cssは」のみ#MyDivに適用したいと思います:
#MyDiv {
@import "bootstrap.less";
}
「bootstrap.cssは」「bootstrap.lessに名前を変更(またはリンク)しなければなりません"実行:
lessc my.less my.css
インポートしたファイルのすべてのセレクタに#MyDivを追加します。
私のプロジェクトの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が呼び出されます。
幸運!
- 1. 外部CSSファイルのロード順
- 2. 別のドメインの外部ウェブサイトからiframeに特定のdivをロードする
- 3. divに外部ファイルをロード
- 4. Angular4 div内の外部htmlページをロード
- 5. ロード特定のCSSファイル - ワードプレス
- 6. 外部JSロード後に外部CSSのCSSクラスを置き換えるjQuery
- 7. 特定のリファラー/ドメインからのみ外部JSをロードする
- 8. 外部javascriptファイルを含む外部htmlファイルをdivにロード
- 9. 外部HTMLをDIVにロードする
- 10. 外部ソースからdivをロードする
- 11. 特定のdiv(jquery、wordpress)に外部ポスト/コンテンツを読み込む
- 12. Entity Framework - 特定の外部キーデータをロードする
- 13. xssに外部のCSSを適用してフラッシュアクションスクリプトにロード
- 14. jQuery divの特定の部分をクリック
- 15. jqueryを使用してdivに外部HTMLファイルをロード
- 16. カラーボックスAjaxの外部ページのロードだけで、特定の事業部
- 17. 特定の外部プログラムが
- 18. DIVクラス内の特定のスパンスタイルにCSSを適用
- 19. JSF用外部CSS
- 20. Wordpress:特定のプラグイン管理用のカスタムCSSをロードするPage
- 21. 外部のウェブサイトからDIVをロードするには?
- 22. divに外部のhtmlファイルをロードする方法
- 23. ロード外部のdivや自身のウェブページにUL - グーグル/ヤフー/ログインfacebook
- 24. jQueryのload()関数を使用せずにDIVに外部要素IDをロード
- 25. 親Divの外のCSSセレクタ
- 26. 1つのコンポーネントに外部JSとCSSをロードする
- 27. Meteorが外部のCSSファイルとJSファイルをロードしない
- 28. 外部divの下にロードされないajax
- 29. ライブラリーの外部ライブラリーをロード
- 30. Cssのホバー表示 - divをロード
我々は、この使用はJavaScriptを行うことができますか? –
@Jayantaあなたは、レンダリングプロセスは、クライアント側で実行されることを意味し、これを行うためにless.jsを使用することができます。しかし、プロダクションでの使用はお勧めしません。詳細については、http://lesscss.org/#client-side-usageを参照してください。 – SubRed
@importルールは、常に他のすべてのタイプのルールに先行するべきではありませんか? –