ボタンクリックで段落スタイルを変更する方法

まず、HTMLのボタンと段落要素を作成します。例えば、次のようなコードを使用できます:

<button id="styleButton">スタイル変更</button>
<p id="paragraph">この段落のスタイルを変更します。</p>

<script>
  // ボタンクリックイベントの処理
  document.getElementById("styleButton").addEventListener("click", function() {
    // 段落要素を取得
    var paragraph = document.getElementById("paragraph");
    // スタイルの変更
    paragraph.style.color = "red";
    paragraph.style.fontWeight = "bold";
    paragraph.style.fontSize = "20px";
  });
</script>

上記の例では、ボタンクリック時に段落のテキストカラーを赤、フォントの太さを太字、フォントサイズを20ピクセルに変更しています。必要に応じて、これらのスタイルを自由に変更してください。

これで、ボタンをクリックすると指定した段落のスタイルが変更されます。この方法を応用すれば、他のスタイルプロパティや別の要素にも適用することができます。

以上が、ボタンクリックで段落スタイルを変更する方法の簡単な例です。必要に応じて、さらに複雑なスタイルの変更や他のイベント処理と組み合わせることもできます。