12. DOM CSS Trong Lập Trình JavaScript

Trong lập trình JavaScript, bạn có thể thao tác với CSS của các DOM Elements (các phần tử HTML) thông qua các thuộc tính và phương thức của chúng. Các thuộc tính và phương thức này cho phép bạn thêm, loại bỏ hoặc thay đổi kiểu dáng (CSS) của các phần tử, giúp bạn điều chỉnh giao diện của trang web một cách động.

Dưới đây là một số cách để thao tác với CSS của DOM Elements trong JavaScript:

Thay đổi kiểu dáng bằng thuộc tính style: Bạn có thể thay đổi kiểu dáng của một DOM Element bằng cách sử dụng thuộc tính style. Chúng ta có thể gán các giá trị cho các thuộc tính CSS trực tiếp cho thuộc tính style.

javascript

const myElement = document.getElementById("myElement");

// Thay đổi màu nền của phần tử
myElement.style.backgroundColor = "blue";

// Thay đổi màu chữ của phần tử
myElement.style.color = "white";

// Thay đổi kích thước phông chữ của phần tử
myElement.style.fontSize = "20px";

Thêm/loại bỏ lớp (class) của DOM Elements: Bạn có thể thêm hoặc loại bỏ lớp CSS cho một DOM Element thông qua các phương thức classList.add() và classList.remove().

javascript

const myElement = document.getElementById("myElement");

// Thêm một lớp mới
myElement.classList.add("newClass");

// Loại bỏ một lớp
myElement.classList.remove("oldClass");

Kiểm tra lớp của DOM Element: Bạn có thể kiểm tra xem một DOM Element có chứa một lớp CSS cụ thể không bằng cách sử dụng phương thức classList.contains().

javascript

const myElement = document.getElementById("myElement");

if (myElement.classList.contains("someClass")) {
  // Phần tử chứa lớp "someClass"
} else {
  // Phần tử không chứa lớp "someClass"
}

Thay đổi kiểu dáng với lớp CSS động: Bạn cũng có thể thay đổi kiểu dáng của một DOM Element bằng cách thêm hoặc loại bỏ các lớp CSS khác nhau.

css

/* CSS */
.myClass {
  background-color: yellow;
  color: black;
  font-size: 18px;
}

javascript

const myElement = document.getElementById("myElement");

// Thêm lớp mới
myElement.classList.add("myClass");

// Loại bỏ lớp
myElement.classList.remove("oldClass");

Lưu ý rằng các phương thức và thuộc tính được sử dụng để thay đổi CSS của DOM Elements là phạm vi nhỏ và thường chỉ được sử dụng cho các thay đổi đơn giản. Nếu bạn muốn thay đổi CSS phức tạp hơn hoặc điều khiển kiểu dáng linh hoạt hơn, hãy xem xét việc sử dụng các lớp CSS động hoặc thư viện hỗ trợ.

Leave a Comment Cancel Reply