jsファイルでCSSファイルをインポートできません

Question

var cssId = '../../../css/export-csv.css'; 
if (!document.getElementById(cssId)) 
{ 
    var div = document.getElementsByTagName('div')[0]; 
    var link = document.createElement('link'); 
    link.id = cssId; 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.media = 'all'; 
    div.appendChild(link); 
} 

jsファイルに 'export-csv.css'という名前のCSSファイルをインポートしたいのですが、できません。事前に感謝します

Answer 1

hrefは、idを参照して、ある場所から別の場所にリンクを移動するために使用されます。任意の値を "IDまたはクラス"として割り当てる場合は、JavaScriptで簡単に呼び出すことができます。

Answer 2

がdocument.getElementsByTagName("head")[0].appendChild(link);代わりの

var div = document.getElementsByTagName('div')[0]; 
div.appendChild(link); 

試してみて、そのCSSファイルのパスが正しいことを確認し、それが問題を解決する必要があります。 How to load up CSS files using Javascript?

Answer 3

の詳細

function loadCSS(filename){ 

    var file = document.createElement("link"); 
    file.setAttribute("rel", "stylesheet"); 
    file.setAttribute("type", "text/css"); 
    file.setAttribute("href", filename); 
    document.head.appendChild(file); 

} 

//ちょうど新しいCSSロードするための関数を呼び出す： loadCSS（ "path_to_css/file.cssを"）;

Answer 4

これを試してみてください：の代わりに

var div = document.createElement("div"); 

：

var div = document.getElementsByTagName('div')[0]; 

はdiv[0]を見つけることができない場合があります。

Answer 5

ここではいくつかの部分が間違っています。

1. cssIdはファイルパスのようです。それはおそらくidかもしれないが、私はそれを疑う。
2. hrefはありません。 external stylesheet（<link>タグ）を使用しているため、コードでスタイルシートにhrefを指定する必要があります。そうしないと、ブラウザはどこからスタイルを取得するのかわかりません。
3. divにスタイルシートを挿入するのは変です。 headに入れる方が適切です。 HTML5では、あなたが反乱軍になることを許していますが、このルールを破ることよりもずっと面白いことがありません。ここで

固定例です。

var cssId = 'some-legitimate-id'; 
if (!document.getElementById(cssId)) 
{ 
    var link = document.createElement('link'); 
    link.id = cssId; 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.media = 'all'; 
    link.href = '../../../css/export-csv.css'; 
    document.head.appendChild(link); 
} 

Answer 6

したがって、次のコードは、トリックを行う必要があります。

var aCSS=document.createElement('link'); 
    aCSS.setAttribute('rel', 'stylesheet'); 
    aCSS.setAttribute('type', 'text/css'); 
    aCSS.setAttribute('href', 'someCssName'); 
    document.getElementsByTagName('head')[0].appendChild(aCSS); 

あなたはまたのdocument.writeを使用してブロックする方法でそれを読み込むことができます。 CSSを動的に読み込む際の問題は、最悪の場合に同じ要素の2つの異なるストーリー（遅いCSS読み込み）がユーザーに表示されるため、ユーザーエクスペリエンスが大幅に低下することです。私はユースケースが何であるか分かりませんが、CSSを動的に読み込む際は注意してください。

gulpまたはgruntを使用してcssを1つの縮小ファイルに結合することをお勧めします。これは、より良いアプローチのIMOになります。