2

本文のhtmlコードにCSSファイルを並べて外部化したい。

なんで？

ページ内に含まれるいくつかのテンプレートを開発していますが、これらのテンプレートからヘッドを変更したり、html ヘッド セクションに JS/CSS 参照を追加したりすることはできません。

私が現在持っているものは次のとおりです。

<html>
<head>
<!-- this i cannot edit -->
</head>
<body>
<!-- some html code -->
<!-- now comes what i can edit --> 
    <style>
    #mywidget {
     color: red;
    }
    </style>
    <div id="mywidget">
    hello
    </div>

<!-- end of section i can edit -->
<!-- other html code -->
</body>
</html>

私はそれを次のように変えたいと思います:

<html>
<head>
<!-- this i cannot edit -->
</head>
<body>
<!-- some html code -->
<!-- now comes what i can edit --> 

    <!-- LINK TO AN EXTERNAL CSS FILE -->

    <div id="mywidget">
    hello
    </div>

<!-- end of section i can edit -->
<!-- other html code -->
</body>
</html>

しかし、ページが読み込まれるたびにすべての css を読み込むオーバーヘッドが必要ないため、外部ファイルに入れたいと考えています。

javascriptを使用して外部css（同じドメイン内でホストされます）をロードし、要素を作成してコンテンツを挿入することを考えました...

これは機能するはずですが、そうでない場合は、少なくとも基本的な定義にスタイルを適用する jquery を使用して、いくつかのスタイル パーサーを一緒にハックできると思います。

しかし、もっと良い方法があるに違いないと確信しています！

ヒントはあります！

4

3 に答える 3

4

CSS の@import ルールを使用できます

<style type="text/css">
  @import url("external.css");
</style>
于 2012-08-04T16:34:59.177 に答える
3

ボディ内にスタイルタグを配置することは、html 標準によれば実際には無効です (ただし、一部のブラウザーでは機能する可能性があります)。

ただし、スクリプトを本文に入れることができ、スクリプトにスタイルリンクを頭に挿入させることができます。jquery 疑似コードは次のようになります

<body>
  ...
  <script type="text/javascript">
    $(document).ready(function() {
      $('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
    });
  </script>
  ...
</body>
于 2012-08-04T20:02:55.990 に答える
1

<link rel="stylesheet" type="text/css" href="style.css"><body>-- これもタグに入れることができます。クロムで問題なく動作します。

于 2012-08-04T16:53:33.363 に答える