JavaScript - headタグ内にCSSのstyleタグを追加する
JavaScriptで<head>タグ内にCSSの<style>タグとを追加する簡単なコード例です。
HMLには<hea>dタグにCSSを追記してスタイルを変更する対象の要素を設置しています。
<div id="target">headタグにCSSを追記して<br>スタイルを変更する要素</div>JavaScriptでcreateElement()で<style>タグを作成、textContentプロパティにて挿入したいCSSコードを指定します。
document.querySelector('head')にて<head>タグを指定し、appendChild()で<head>タグ内の最後に作成した<style>タグを挿入します。
以下のコード例ではスクリプトで<style>タグを追記し、対象のHTML要素のスタイルを変更しています。
// style要素を作成
let style = document.createElement('style');
// style要素の内容を作成
style.textContent = '#target { padding: 10px; background-color: blueviolet; border-radius: 10px;}';
// head内の最後にstyle要素を追加
document.querySelector('head').appendChild(style);