JavaScriptを使用してHTMLドキュメントにスタイルを追加する方法

インラインスタイルの追加: HTML要素に直接スタイルを追加する方法です。要素のstyle属性を使用してスタイルを指定します。

<!DOCTYPE html>
<html>
<head>
  <title>スタイルの追加</title>
  <script>
    function addStyle() {
      var element = document.getElementById("myElement");
      element.style.color = "red";
      element.style.fontSize = "20px";
    }
  </script>
</head>
<body>
  <h1 id="myElement">Hello, World!</h1>
  <button onclick="addStyle()">スタイルを追加</button>
</body>
</html>

CSSクラスの追加: JavaScriptを使用して要素にCSSクラスを追加する方法です。CSSクラスには事前に定義されたスタイルが含まれています。

<!DOCTYPE html>
<html>
<head>
  <title>スタイルの追加</title>
  <style>
    .highlight {
      color: blue;
      font-weight: bold;
    }
  </style>
  <script>
    function addStyle() {
      var element = document.getElementById("myElement");
      element.classList.add("highlight");
    }
  </script>
</head>
<body>
  <h1 id="myElement">Hello, World!</h1>
  <button onclick="addStyle()">スタイルを追加</button>
</body>
</html>

CSSテキストの追加: JavaScriptを使用して新しいCSSスタイルシートを作成し、それをドキュメントに追加する方法です。

<!DOCTYPE html>
<html>
<head>
  <title>スタイルの追加</title>
  <script>
    function addStyle() {
      var style = document.createElement("style");
      style.innerHTML = "h1 { color: green; font-size: 24px; }";
      document.head.appendChild(style);
    }
  </script>
</head>
<body>
  <h1>Hello, World!</h1>
  <button onclick="addStyle()">スタイルを追加</button>
</body>
</html>

これらの方法を使用すると、JavaScriptを使用してHTMLドキュメントにスタイルを追加することができます。適切な方法を選択し、ウェブサイトやアプリケーションのデザインをカスタマイズしてください。