JavaScriptを使用して要素のスタイルを変更する方法

getElementByIdを使用する方法: HTML要素には一意のID属性がある場合、getElementByIdメソッドを使用して要素を取得し、スタイルを変更することができます。以下はその例です。

// HTML要素を取得
var element = document.getElementById("elementId");
// スタイルを変更
element.style.color = "red";
element.style.fontSize = "20px";

querySelectorを使用する方法: CSSセレクタを使用してHTML要素を指定する場合は、querySelectorメソッドを使用することができます。以下はその例です。

// HTML要素を取得
var element = document.querySelector(".elementClass");
// スタイルを変更
element.style.backgroundColor = "blue";
element.style.padding = "10px";

classListを使用する方法: HTML要素にクラスが割り当てられている場合、classListプロパティを使用してクラスを追加、削除、トグルすることができます。以下はその例です。

// HTML要素を取得
var element = document.getElementById("elementId");
// クラスを追加
element.classList.add("newClass");
// クラスを削除
element.classList.remove("oldClass");
// クラスをトグル
element.classList.toggle("active");

これらはJavaScriptを使用してHTML要素のスタイルを変更するいくつかの基本的な方法です。要素のスタイルを変更するには、対象の要素を適切に取得し、styleプロパティを使用して必要なスタイルを設定します。