JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで新しいCSSルールを動的に挿入する方法

JavaScriptで新しいCSSルールを挿入するには？

JavaScriptから動的にスタイルを追加したい場合、sheetオブジェクトのinsertRule()メソッドを使用すると簡単に実現できます。

基本的な流れは以下の2ステップです。

  1. document.createElement("style")でスタイル要素を作成し、document.head.appendChild()を使ってドキュメントのheadに追加します。
  2. 作成したスタイル要素のsheetプロパティに対してinsertRule()を呼び出し、新しいCSSルールを挿入します。

サンプルコード

以下が実際のコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   <div id="demo">
      This is a JavaScript program
   </div>
</body>
<script>
   var creatingStyle = document.createElement("style");
   document.head.appendChild(creatingStyle);
   creatingStyle.sheet.insertRule(`#demo{
background-color: red;
}`);
</script>
</html>

この例では、idが「demo」のdiv要素に対して背景色を赤にするCSSルールを、JavaScriptから動的に挿入しています。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「index.html」などの任意の名前で保存します。次に、VSCodeエディタでそのファイルを右クリックし、「Open with Live Server」を選択してください。

出力結果

実行すると、以下のように出力されます。

JavaScriptで新しいCSSルールを動的に挿入する方法

補足：insertRule()の応用ポイント

  • insertRule()は第2引数にインデックス番号を指定できるため、ルールを挿入する位置を細かく制御できます。
  • 挿入済みのルールを削除したい場合は、同じくsheetオブジェクトのdeleteRule()メソッドを使用します。
  • テンプレートリテラル（バッククォート）を使うことで、複数行にわたるCSSルールも読みやすく記述できます。

  1. JavaScriptで文字列を改行する方法

    JavaScriptで文字列に改行を挿入するには？ JavaScriptで文字列を改行して表示したい場合は、HTMLの <br> タグを使用します。文字列同士を + 演算子で連結し、その間に <br> を挟むことで、ブラウザ上で改行された状態で表示されます。 サンプルコード 以下は、innerHTML プロパティと <br> タグを組み合わせて、見出し内のテキストを2行に分けて表示するコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta

  2. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要