cssの読み込まれるタイミング

Question

###やりたいこと
ページ読み込み時に、cssの動的書き換えをしたい

###コード

div{
   color: #000000; 
}

// あるサイト（https://qiita.com/life5618/items/950558e4b72c038333f8）にてお借りしたcssを取得する関数
function getRuleBySelector(sele){
    var i, j, sheets, rules, rule = null;
    sheets = document.styleSheets;
    for(i=0; i<sheets.length; i++){
        rules = sheets[i].cssRules;
        for(j=0; j<rules.length; j++){
            if(sele === rules[j].selectorText){
                rule = rules[j];
                break;
            }
        }
    }
    return rule;
}

document.addEventListener("DOMContentLoaded", DCL ); //(1)

function DCL(){
    getRuleBySelector("div").style.color = "#FF0000"; //(2)
}

（コードはかなり簡略しています。）

###上記で発生する不具合
(2)のところでdivセレクタを取得し、文字色の変更をしているのだが、状況によりdivセレクタが取得できない。（Cannot read property 'style' of null）
なお、(2)でエラーが発生しても、リロード等せずにコンソールにてDCLを呼び出すとエラーを吐かず実行できるので、"DOMContentLoaded"にて呼ばれた際に、cssの読み込みが終わっていないと思われる。

###質問
DOMツリーの読み込みにはcssは含まれないのでしょうか？
またその場合、cssを読み込んだ後に実行するのはどのイベント（もしくは関数）が適切なのでしょうか？

Answer 1

DOMContentLoadedはスタイルシートの読み込みを待ちません。おそらくloadなら完了しているのでは。

【Window - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window#ロード・アンロードイベント

DOMContentLoaded

文書が完全に読み込まれて解析されたときに、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

load
スタイルシートや画像などの依存するすべてのリソースを含め、ページ全体の読み込みが完了したときに発生します。

【フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]】
https://techblog.raccoon.ne.jp/archives/53180280.html

Comments

[yuuyu]

ありがとうございます。
domの完了がcssomの完了とは限らないのですね。。
cssomの完了イベントがあればいいのですが、なさそうなのでloadで試してみます