プレゼンテーションシナリオ: スライド112、113

スライド112と113では、DOMでのスタイルとCSSの変更について説明します。

要素にアクセスできたら、JavaScriptを使用して2つの方法でその外観を変更できます：

4.1. element.style.propertyで直接スタイルを変更

構文:

element.style.property = "value";

ここでpropertyはCSSプロパティ名です（camelCase規則に従って記述）。

例：background-color → backgroundColor、font-size → fontSize。

例:

<p id="text">Hello World!</p>

let p = document.getElementById("text");
p.style.color = "red";           // change text color
p.style.fontSize = "20px";       // change font size
p.style.backgroundColor = "yellow"; // change background color

注意: この方法はインラインスタイルにのみ適用されます。多くのスタイルを管理し、保守性を高める必要がある場合 → 方法4.2のclassListを使用します。

4.2. classListでCSSクラスを管理

element.classList.add("className") → クラスを追加。
element.classList.remove("className") → クラスを削除。
element.classList.toggle("className") → クラスをオン/オフ。

例:

CSSでクラスを定義します：

.highlight {
    color: white;
    background-color: blue;
    padding: 5px;
}

JavaScriptで：

let p = document.getElementById("text");
p.classList.toggle("highlight"); // add or remove highlight

結果: ボタンをクリックするたびに、テキスト段落のハイライト効果がオン/オフされます。

この方法は、コードがよりクリーンになり、複数のCSSプロパティを同時に変更する必要がある場合に管理しやすくなります。

以上で、DOMでスタイルとCSSを変更する2つの方法についての説明を終わります。