9

ページの先頭にスタイルシートを配置できることは知っていますが、別のファイルに配置するのが好きです。現在、私は単一ページのアプリケーションで作業しています。

SPA のコンテンツは動的ですよね？そのため、head セクションのすべてのスタイル シートを link タグでインポートしたくありませんでした。必要に応じてスタイルシートをインポートできますか?

つまり、SPA が動的コンテンツをロードするたびにスタイル シートもロードされるように、本文にリンクを含めることはできますか? 動的コンテンツがロードされていない場合でも、すべてのスタイルシートをロードする必要がないように..

もう一度強調します。コンテンツが読み込まれるたびに、スタイルが読み込まれます。

次のようなインライン スタイルを使用して実行できることはわかっています。

~PSEUDO CODE 
<tagname style="somestyle"></tagname>

しかし、動的ファイルのインポートもできますか? 本体にlinkタグも付けられますか？動くとしてもスタンダードなの？

4

3 に答える 3

3

スタイルシート ファイルを追加/削除する Java スクリプトを使用して、ヘッド領域のリンク タグを追加/削除/編集できます。

コード例:

head にスタイルシートを追加します。

var newstyle = document.createElement("link"); // Create a new link Tag
// Set some attributes:
newstyle.setAttribute("rel", "stylesheet");
newstyle.setAttribute("type", "text/css");
newstyle.setAttribute("href", "filename.css"); // Your .css File
document.getElementsByTagName("head")[0].appendChild(newstyle);

スタイルシートを削除または編集するには、すべてのスタイルシートに id 属性を与え、次のようにアクセスします:

document.getElementById('styleid')

または、ヘッド領域のすべてのリンク タグをループして正しいタグを見つけることもできますが、ID を使用した解決策をお勧めします ;)

href 属性を変更できるようになりました。

document.getElementById('styleid').setAttribute("href", "newfilename.css");

または、完全なタグを削除できます。

var styletorem = document.getElementById('styleid');
styletorem.parentNode.removeChild(styletorem)
于 2013-08-29T12:08:11.857 に答える
3

Web ページに動的なスタイルを適用しようとしました。ボタンを使用しました。それをクリックすると、JavaScript のメソッドを使用して CSS がインポートされます。

私のhtmlには、次のものがあります。

<button type="button" onclick="changeStyle()"> CLICK TO SEE THE MAGIC!! </button>

次に、Javascript には、changeStyle() という名前のメソッドがあります。

  function changeStyle()
  {
    var styles = document.createElement('link');
    styles.type="text/css";
    styles.rel="stylesheet";
    styles.href="./css/style.css";
    document.head.appendChild(styles);
 }

それは完璧に機能しました。

于 2017-06-26T11:31:35.340 に答える