7

私は現在 Webkit (Safari と Chrome) で問題を抱えています。いくつかの html を div に動的に (innerHTML) ロードしようとすると、html には css ルールが含まれています (...)。html がレンダリングされた後、スタイル定義はロードされません (そのためスタイルがそこにないことが視覚的にわかります。また、javascriptで検索してもスタイルが見つかりません)。jquery プラグイン tocssRule() を使用してみましたが、機能しますが、遅すぎます。スタイルを動的にロードする Webkit を取得する別の方法はありますか? ありがとう。パトリック

4

8 に答える 8

8

ドキュメントの先頭に「リンク」タグを追加することをお勧めします。それが不可能な場合は、head に「style」タグを追加してみてください。スタイルタグは本文に含めるべきではありません (検証さえしません)。

リンクタグを追加:

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);
于 2008-12-09T07:57:30.863 に答える
4

まっすぐな jQuery の方法 (Chrome を含む主要なブラウザーで動作します): 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 参照を挿入するだけの場合は無視できます。

于 2009-12-22T19:26:01.093 に答える
2

最も簡単な方法（jQueryを使用）は次のとおりです。

var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");

そのようにすれば、Safariで動作します。通常の jQuery の方法で (すべて 1 つのテキスト文字列で) 実行すると、失敗します (css は読み込まれません)。

次に、 $('head').append(cssLink); で頭に追加するだけです。

于 2009-08-05T00:02:36.583 に答える
1

うーん。Andrei Cimpoca の結果に賛成票を投じるのに十分なポイントがありませんが、その解決策がここでは最良の解決策です。

style.innerHTML = "..."; Webkitエンジンまたはつまりでは機能しません。

CSS テキストを正しく挿入するには、次のことを行う必要があります。

style.styleSheet.cssText = "..."; つまり。

と

style.appendChild(document.createTextNode("...")); ウェブキット用。

Firefox は、2 番目のオプション、または style.innerHTML = "..."; でも動作します。

于 2010-05-30T01:12:38.643 に答える
1

Vatos に感謝します。基本的にはあなたが提案したことを実行しましたが、jquery を使用して html を設定し、head に新しいスタイルを追加しました。私のコードは次のように終わりました

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

于 2008-12-09T18:30:58.137 に答える
1

これがギグです。パトリックが言ったことは私にはうまくいきませんでした。これが私がやった方法です。

    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 は非推奨であり、そのような用途には使用しないでください。さらに、速度も遅いです。

于 2009-06-04T19:50:17.963 に答える
0

上記のスタイル タグ ベースのバージョンに加えて、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 のどのバージョンでもサポートされていません: http://www.quirksmode.org/dom/w3c_css.html

于 2010-06-06T23:36:06.480 に答える