Kịch bản thuyết trình: Slides 112, 113

Mình tiếp tục với slide 112 và 113 về Thay đổi style và CSS trong DOM.

Khi đã truy cập được phần tử, chúng ta có thể thay đổi giao diện của nó bằng JavaScript theo hai cách:

4.1. Thay đổi style trực tiếp bằng element.style.property

Cú pháp:

element.style.property = "value";

Trong đó property là tên thuộc tính CSS (viết theo quy tắc camelCase).

Ví dụ: background-color → backgroundColor, font-size → fontSize.

Ví dụ:

<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

Lưu ý: Cách này chỉ áp dụng cho inline style. Nếu cần quản lý style nhiều và dễ bảo trì hơn → dùng cách 4.2 classList.

4.2. Quản lý CSS class với classList

element.classList.add("className") → thêm class.
element.classList.remove("className") → xóa class.
element.classList.toggle("className") → bật/tắt class.

Ví dụ:

Trong CSS, mình định nghĩa class:

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

Trong JavaScript:

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

Kết quả: mỗi lần click nút, đoạn văn bản sẽ bật/tắt hiệu ứng highlight.

Cách này giúp code sạch hơn, dễ quản lý hơn khi cần thay đổi nhiều thuộc tính CSS cùng lúc.

Như vậy là mình đã trình bày xong hai cách thay đổi style và CSS trong DOM.