JavaScript：動的に読み込まれたCSS：CSS変数がJSでは表示されませんが、CSSから評価されます

Question

JavaScriptを使用して動的にスタイルシートをアプリケーションに読み込みます。このスタイルシートでは、自分のJSから読み書きしたいさまざまなCSS変数があります。

ヘッドタグに直接埋め込まれたスタイルシートは正しく処理されます。 CSS変数はCSSで評価され、JSで表示されます。

ランタイム中に動的にロードされるスタイルシートには、いくつかの奇妙なエラーがあります。 CSS変数はCSSによって評価されますが、はJSによって表示されるではありません。

誰かがヒントを持っていますか？

var cS = window.getComputedStyle(document.querySelector("html")); 
var pV = cS.getPropertyValue('--foo'); 

：私はCSS変数を読み取るために使用

var fileref = document.createElement("link"); 
fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.setAttribute("href", "not_embedded_from_start.css"); 

document.getElementsByTagName("head")[0].appendChild(fileref); 

方法を：私は動的にCSSをロードするために使用

https://plnkr.co/edit/EChqjvZQJp7yz3L6nknU?p=preview

方法：エラーの最小限のデモと

Plunker

例CSS：

Answer 1

これは、スタイルシートが実行時にロードされないため、後でCSS変数にアクセスできないためです。

var fileref=document.createElement("link"); 
fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.onload = function(){ stylesheetLoaded(); } 
fileref.setAttribute("href", "not_embedded_from_start.css"); 

注それは強くあること：それは関数を呼び出すように、それは（JSにしたがってアクセス可能）をロード行われたときに、stylesheetLoaded()を言って、あなたの動的に追加するスタイルシートにあなたがsimply attach an onload handler、それを行うために

にハンドラーを添付してから、href属性を設定してください。

そして、あなたはその関数呼び出しで好きなロジックを実行することができます

var stylesheetLoaded = function() { 
    cS = window.getComputedStyle(document.querySelector("html")); 
    pV = cS.getPropertyValue('--baz'); 
    document.getElementById("baz").innerText = pV; 
} 

はあなたのコードの概念実証フォークを参照してください：https://plnkr.co/edit/OYXk7zblryLs3F5VM51h?p=preview