どのように私はWebkitの（サファリ/クローム）で動的にCSSルールをロードしていますか？

StackOverflow https://stackoverflow.com/questions/351633

  •  20-08-2019
  •  | 
  •  

質問

私は現在、私はdiv要素の中にいくつかのHTMLを動的に（innerHTMLプロパティ）をロードしようとしたWebkitの中の問題（SafariとChromeを）持っている、HTMLはHTMLがレンダリングされる後のスタイル定義はありませんが、CSSルール（...）が含まれていロードされた（ので、視覚的に私は何のスタイルが見つからない彼らのためにJavaScriptを使用して検索した場合のスタイルがあるともありません伝えることができます）。 私はjqueryのプラグインtocssRule（）、それが動作を使用して試してみましたが、それはあまりにも遅いです。動的にスタイルをロードするためのWebKitを取得する別の方法はありますか？ ありがとうございました。 パトリック

役に立ちましたか？

解決

私はそれがあなたの文書の先頭に「リンク」タグを追加するには良い習慣だと思います。それが不可能な場合は、頭に「スタイル」タグを追加してみてください。スタイルタグはボディ（でも検証しません）にするべきではありません。

リンクタグを追加します：

var link = document.createElement('link');

link.setAttribute('rel', 'stylesheet');

link.type = 'text/css';

link.href = 'http://example.com/stylesheet.css';

document.head.appendChild(link);

スタイルのタグを追加します：

var style = document.createElement('style');

style.innerHTML = 'body { background-color: #F00; }';

document.head.appendChild(style);

他のヒント

（主要なブラウザ上で動作します - クロムを含む）

ストレートアップjQueryの道：<のhref = "http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-動的で-jqueryの/」のrel = "nofollowをnoreferrer"> http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/する

サイトから：

$("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
"rel": "stylesheet",
"type": "text/css",
"href": "url/to.css"
});

注：例もJSの注入を含んで、あなただけのCSSリファレンスを注入したい場合は無視することができます。

。

最も簡単な方法である（jQueryのを使用する）であり、以下：

var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");
あなたがそれを行う場合は、

そのように、それはSafariで動作します。あなたはそれを通常のjQueryの方法（1つのテキスト文字列内のすべて）を行う場合は、（CSSがロードされません）失敗します。

次に、あなただけの$（ '頭'）で頭にそれを追加（cssLink）を追加し;ます。

innerHTMLのをやってdocument.headが未定義だったとき

おかげVatosは、あなたが私に良いリードを与え、基本的に私はあなたが提案したが、HTMLを設定しているので頭に新しいスタイルを追加するためにjqueryのを使用したものでした、サファリ/クロームは失速う。私のコードは、

このように見て終了しました 

var cssDefinitions = '..my style chunk goes here';
var style = document.createElement('style');'
$(style).html(cssDefinitions);
$('head').append(style);

まあまあ。私はアンドレイCimpocaの結果を投票する十分なポイントを持っていないが、そのソリューションは、ここでは最高の一つです。

style.innerHTML = "..."; WebKitのエンジンやIEで動作しません。

正しくCSSのテキストを挿入するには、あなた必要があります：

style.styleSheet.cssText = "..."; IE用ます。

と

style.appendChild（document.createTextNode（ "..."））; WebKitのため。

Firefoxはまた、またはstyle.innerHTMLと第二の選択肢で動作します= "...";

ここでのギグです。何パトリックは私のために動作していないと述べました。ここで私はそれをやった方法です。

    var ref = document.createElement('style');
ref.setAttribute("rel", "stylesheet");
ref.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(ref);
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie
else ref.appendChild(document.createTextNode(asd));

InnerHTMLのが廃止されており、このようなことのために使用すべきではありません。さらに、それはあまりにも遅くなります。

上記のバージョンをベーススタイルタグの他にも、直接JavaScriptを使用してスタイルを追加することができます：

var style = document.getElementById('some-style-tag');
var sheet = style.sheet;
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length);

これはcssText / innerHTMLプロパティに頼らずに変数を使用することができるという利点を持っています。

あなたはルールの多くを挿入する場合のWebKitベースのブラウザ上で、これは遅くなることに注意してください。バグがWebKitの中で、このパフォーマンスの問題を解決するために開いてあります（ます。https：//bugs.webkit .ORG / show_bug.cgi？ID = 36303 に）。それまでは、一括挿入のためのスタイルのタグを使用することができます。

このスタイルルールを挿入するW3C標準的な方法ですが、それはIEのすべてのバージョンでサポートされていません：<のhref =「http://www.quirksmode.org/dom/w3c_css.html」のrel = "nofollowをnoreferrer "> http://www.quirksmode.org/dom/w3c_css.html の

私はそれが古いトピックです知っている、誰かが恩恵を受けるだろうと思いました。私はあまりにも私のページに動的にCSSをロードするために必要な（すべてレンダリングのonload前に、付属の「コンポーネント」のテンプレートに従って）：

var oStyle = $("<style />");

oStyle.append("@import url(" + sTemplateCssUrl + ");");
oStyle.attr("type", "text/css");

$(document.head).append(oStyle);
IE 10とChromeで働いてではなく、Safariで -

Iは、一ラインアプローチとdocument.headする追加しようとしました。上記のアプローチは、すべて3で働いています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top