dom_dom0700_006

外部CSSを 動的に 追加し、適用完了を検知したい。最適なコードはどれか。

  1. style.textContent=’@import url(x.css)’; とし、即時に適用されると仮定する
  2. const l=document.createElement(‘link’); l.rel=’stylesheet’; l.href=’x.css’; l.onload=cb; document.head.appendChild(l);
  3. <link rel=”preload” as=”style” href=”x.css”> だけを挿入する
  4. document.body.style=’@import url(x.css)’ と書く
正解
  1. const l=document.createElement(‘link’); l.rel=’stylesheet’; l.href=’x.css’; l.onload=cb; document.head.appendChild(l);
解説

<link rel=”stylesheet”> を生成して挿入し、onload で適用完了を検知するのが一般的。@import は遅延や依存の追跡が難しく推奨されにくい。preload は読み込みのみで適用しない。

使用例（サンプルコード）

[ html ]

<script>
  const l = document.createElement('link');
  l.rel = 'stylesheet';
  l.href = '/theme-dark.css';
  l.onload = () => console.log('CSS applied');
  l.onerror = () => console.warn('CSS failed');
  document.head.appendChild(l);
</script>