経験知ロゴ

JavaScriptでheadタグ内のstyleタグを全て削除する方法

queryselectorall

ReactでCSSをimportすると、全てのコンポーネントに対して読み込まれてしまい、読み込むCSSの切り分けができません。

CSSモジュールを使う方法もありますが、今後使われなくなりそうな気配がありますし、僕が使っているTailwindcssをCSSモジュールで使うのはちょっと面倒です。

今回の僕が求めているケースは、エディタのプレビュー用に、プレビュー画面ではCSSを一切読み込ませないようにしたかったため、プレビュー画面のコンポーネントで、styleタグを全て削除することで強引に解決。

styleタグを削除するには、querySelectorAllを使って全てのstyleタグを取得し、それぞれの要素をremoveしてあげればOK。

    const style = document.querySelectorAll("style");
    style.forEach((s) => {
      s.remove();
    });

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから