流れは、
<link>
タグを作る属性を設定
document.head
に埋め込み
link タグを作る
<link>
タグはdocument.createElement
を使って以下のように作れます。
const link = document.createElement('link');
Node としては存在しますが、まだ DOM 上にはない状態です。
属性を設定
.css
の読み込みなのでrel
とhref
が必要ですね。以下のように設定します。
link.rel = 'stylesheet';
link.href = '...'; // url
document.head に埋め込み
<head>
タグが存在するマークアップだとdocument.head
で<head>
タグを取得でき、クエリで取得する必要もない一番てっとり早い方法だと思います。なのでここに上記で作成したlink
を埋め込みます。
ある要素の下に要素を埋め込むにはNode#appendChild
を使います。以下はそのコードです。
document.head.appendChild(link);
これでこのような HTML になるはずです。そして、 DOM に追加された瞬間にそのhref
に指定したファイルの取得が始まります。
<head>
<link rel="stylesheet" href="...">
</head>
読み込み終わりのタイミングを知る
スタイルシートなので何かに依存しないと動かないといったことはあまりないと思いますが、知りたい場合はload
イベントを使います。これは.css
ファイルの読み込みが終わったら発火するイベントなので、これを使えば読み終わったらアラート出すみたいなことができます。
link.addEventListener('load', () => {
alert('読み込み完了');
});
document.head.appendChild(link);
DOM に埋め込む前に定義してください。