359

Javascriptを使用してcssスタイルシートをhtmlページにインポートすることは可能ですか？もしそうなら、それはどのように行うことができますか？

PS javascriptは私のサイトでホストされますが、ユーザーが<head>自分のWebサイトのタグを入力できるようにし、サーバーでホストされているcssファイルを現在のWebページにインポートできるようにする必要があります。（cssファイルとjavascriptファイルの両方が私のサーバーでホストされます）。

4

19 に答える 19

490

これは「昔ながらの」やり方で、うまくいけばすべてのブラウザで動作します。理論的には、setAttribute残念ながら IE6 は一貫してサポートしていません。

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

この例では、CSS が既に追加されているかどうかを確認するため、一度だけ追加します。

そのコードを JavaScript ファイルに入れ、エンドユーザーに単に JavaScript を含めてもらい、CSS パスが絶対パスであることを確認してサーバーからロードされるようにします。

バニラJS

head以下は、プレーンな JavaScript を使用して、URL のファイル名部分に基づいて要素にCSS リンクを挿入する例です。

<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

head終了タグの直前にコードを挿入すると、ページがレンダリングされる前に CSS が読み込まれます。外部 JavaScript ( .js) ファイルを使用すると、スタイル設定されていないコンテンツの Flash ( FOUC ) が表示されます。

于 2009-02-23T09:25:35.197 に答える
81

jquery を使用する場合:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
于 2015-10-28T09:13:53.110 に答える
55

私はこのスクリプトのようなものがするだろうと思います：

<script type="text/javascript" src="/js/styles.js"></script>

このJSファイルには、次のステートメントが含まれています。

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

javascriptとcssがサイトを参照する場合、それらのアドレスは絶対である必要があります。

多くのCSSインポート手法については、この「分岐手法を使用したCSSハックにノーと言ってください」の記事で説明しています。

ただし、「JavaScriptを使用してポートレットCSSスタイルシートを動的に追加する」の記事では、CreateStyleSheetの可能性（IEの独自のメソッド）についても言及しています。

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>
于 2009-02-22T13:56:26.863 に答える
31

Element.insertAdjacentHTMLは非常に優れたブラウザー サポートを備えており、1 行でスタイルシートを追加できます。

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
于 2018-06-12T17:22:21.637 に答える
10

私はこれがかなり古いスレッドであることを知っていますが、ここに私の5セントがあります.

必要に応じて、これを行う別の方法があります。

css ファイルをしばらくだけアクティブにしたい場合があります。CSS切り替えみたいな。css をアクティブにしてから、別のイベントの後に非アクティブにします。

css を動的にロードしてから削除する代わりに、新しい css のすべての要素の前に Class/an id を追加してから、css のベース ノードのその class/id を切り替えるだけです (body タグのように)。

このソリューションを使用すると、最初に読み込まれる css ファイルが増えますが、css レイアウトをより動的に切り替える方法があります。

于 2012-01-25T08:04:50.463 に答える
4

cssおよびJSファイルのsynchおよびasychをオンデマンドでロードする一般的なjqueryプラグインがあります。また、すでにロードされているものを追跡します:)参照：http ：//code.google.com/p/rloader/

于 2010-12-12T12:01:58.723 に答える
4

JS および/または CSS をロードするために使用する完全なコードの下

function loadScript(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var done = false
  var extension = '.js'
  for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script")
    script.src = path        
    script.type = "text/javascript"
    script.onload = script.onreadystatechange = function() {
        if ( !done && (!this.readyState ||
            this.readyState == "loaded" || this.readyState == "complete") ) {
            done = true
            script.onload = script.onreadystatechange = null   // cleans up a little memory:
            head.removeChild(script)  // to avoid douple loading
        }
  };
  head.appendChild(script) 
  done = false
 }
}

function loadStyle(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var extension = '.css'
  for (var file of files){ 
   var path = directory + file + extension 
   var link = document.createElement("link")
   link.href = path        
   link.type = "text/css"
   link.rel = "stylesheet" 
   head.appendChild(link) 
 }
}

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();

(() => loadStyle('styles/', ['index'])) ();
于 2016-09-06T12:08:12.260 に答える
4

jQuery の要素作成メソッド (私の好み) と callback を使用する方法を次に示しますonLoad。

var css = $("<link>", {
  "rel" : "stylesheet",
  "type" :  "text/css",
  "href" : "style.css"
})[0];

css.onload = function(){
  console.log("CSS IN IFRAME LOADED");
};

document
  .getElementsByTagName("head")[0]
  .appendChild(css);
于 2014-10-22T18:18:32.587 に答える
2

このYUIライブラリに使用するか、この記事を使用して実装できます

于 2009-02-22T13:59:34.390 に答える
2

YUIライブラリはあなたが探しているものかもしれません。また、クロスドメインロードもサポートしています。

jqueryを使用する場合、このプラグインは同じことを行います。

于 2009-02-22T14:04:31.023 に答える
0 
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

私はタイムリーフを使用していますが、これはうまくいきます。ありがとう

于 2014-10-21T04:45:23.740 に答える