20

どうやら<link rel="stylesheet" ...、ドキュメント本文を追加することは、W3C 標準では悪い習慣と見なされています。<style>ボディにブロックを追加する場合も同じです...

<head>タグの外側に CSS を追加するための標準準拠のソリューションはありますか? ドキュメントの最後にあるように。

4

5 に答える 5

28

CSS スタイルを特定のイベントにのみ含めたい場合は、先頭でそうすることを妨げるものは何もありません。

var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here

document.head.appendChild(linkElement);

これには、スタイルシートを非同期の方法で追加するという追加の利点があり、ブラウザーが他のものをダウンロードするのをブロックしません。

于 2012-05-19T13:00:14.657 に答える
3

この問題を解決する 1 つの方法は、.get() を使用してロードし、CSS必要な場合にのみ head タグに追加することです。

Jクエリ

var css = "foobar.css";
var callback = function() {
  alert("CSS is now included");
  // your jquery plugin for a navigation menu or what ever...
};

$.get(css, function(data){
  $("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
  callback();
});

このcallback関数はscript、ファイルに依存するコードをCSS適切にフォーマットし、CSSas が追加された後にのみ実行できるようにするのに便利です!

于 2012-05-19T12:46:56.517 に答える
2

サーバー側プログラミングや DHTML などの作業を開始すると、この標準はほとんど無視されるようになると思います。

静的な HTML ファイルの場合は、必ず HEAD タグ内に CSS のみを含めるという規則に従うことができます/従うべきですが、条件付き出力と対話機能の場合は、条件付きスタイルを設定することで単純化できる場合もあります。最終的に、これは結果のドキュメントを複雑にすることを考慮してください。ブラウザは問題なくレンダリングできるかもしれませんが、自分でソースを見ると、レイアウト/表示を定義するすべてのスタイルが HEAD 内にあると、読みやすくなります。もちろん、それが悪い習慣である理由については、他にも多くの例と理由があります。

HTML 標準は、サーバー サイド スクリプトや DHTML などとは別に存在します。つまり、HTML/SSS/JavaScript 標準ではありません。

于 2012-05-19T14:57:21.170 に答える
1

scoped 属性を使用できるのは HTML5 のみですが、DOCTYPE を正しく宣言していることを確認してください。

<style type="text/css" scoped>
.textbox {
color: pink
}
</style>
于 2012-05-19T12:46:31.970 に答える
-4

外部 CSS シートについて話している場合、正しい方法は次のとおりです。

<link href="....link to your style...." rel="stylesheet">

インライン CSS を含めたい場合は、次のようにするだけです。

<style>
 ....Your style here...
</style>
于 2015-11-25T14:09:15.467 に答える