JavaScript | CSSコードをheadに追加・挿入する方法

JavaScript DOM操作,JavaScript

JavaScript | CSSコードをheadに追加・挿入する方法

JavaScriptでCSSコードを<style>でheadに追加・挿入する方法を紹介しています。

JavaScriptでCSSのスタイルを変更する方法のひとつとして、変更するスタイルの数が多い場合、動的にダークモード・ライトモードを切り替えたい場合、ユーザーのカスタマイズデザインなどを適用したい場合などには<head>に直接<style>を追加した方が早い場合もあります。

この方法の場合、ブラウザは追加した<style>の内容を即時読み込んで反映します。

今まで利用者さんからデザインが切り替わらないと報告を受けた事はありませんので、殆どのブラウザで問題なく反映されるものと考えています。

CSSコードをheadに挿入する

CSSコードを<style>で<head>に直接挿入するJavaScriptの動作サンプルとサンプルコードになります。

See the Pen JavaScript | Delete blank data after delete by yochans (@yochans) on CodePen.

サンプルではHTMLに動的にスタイルを適用するテキストの<p>タグをひとつ設置しています。

<p id="text">Add css style to head<p>

JavaScriptも特別な処理は必要なく用意したCSSコードを<head>内の最後に追加するだけです。

let style = `<style>
#text {
	font-size: 40px;
	color: #4169e1;
}
<style>`;

document.querySelector(`head`).insertAdjacentHTML('beforeend', style);

ただ、上記コードのままですとデザインを差し替えたい場合等に一度<style>を削除するコードを書く手間が発生しますので<style>にidなどが振っておくと便利になると思います。

私の場合は、最初から空の<style id="xxx"></style>をheadに書いておく事も少なくありません。

let style = `
#text {
	font-size: 40px;
	color: #4169e1;
}`;

document.querySelector(`head`).insertAdjacentHTML('beforeend', `<style id="custom_css"></style>`);
document.querySelector(`#custom_css`).innerHTML = style;

JavaScript DOM操作,JavaScript

Posted by Yousuke.U