Thay đổi CSS bằng HTML DOM trong JavaScript

Trong phát triển web, khả năng thay đổi giao diện người dùng một cách linh hoạt và động là một yếu tố quan trọng để tạo ra những trang web tương tác và hấp dẫn. CSS (Cascading Style Sheets) được sử dụng để định kiểu cho các phần tử HTML, nhưng để tạo ra những hiệu ứng động hoặc thay đổi giao diện theo hành động của người dùng, JavaScript có thể kết hợp với DOM (Document Object Model) để thay đổi CSS trực tiếp.

Bằng cách sử dụng JavaScript để thao tác với các thuộc tính CSS, chúng ta có thể tạo ra các trải nghiệm người dùng phong phú, như thay đổi màu sắc, thay đổi bố cục hay áp dụng các hiệu ứng hoạt ảnh ngay lập tức mà không cần tải lại trang. Chủ đề này sẽ đi sâu vào các phương pháp thay đổi CSS bằng HTML DOM trong JavaScript, giúp bạn hiểu rõ cách thức thao tác và áp dụng chúng vào các tình huống thực tế.

Giới thiệu về thay đổi CSS bằng HTML DOM trong JavaScript

Khái niệm về CSS và DOM

• CSS (Cascading Style Sheets) là ngôn ngữ định kiểu được sử dụng để mô tả cách thức hiển thị của các phần tử trong tài liệu HTML. CSS xác định các thuộc tính như màu sắc, font chữ, khoảng cách, chiều rộng, chiều cao, bố cục và nhiều đặc tính khác của trang web. Nhờ CSS, chúng ta có thể làm đẹp và tạo ra các giao diện người dùng dễ nhìn và dễ sử dụng.

• DOM (Document Object Model) là một mô hình đối tượng đại diện cho cấu trúc của tài liệu HTML hoặc XML dưới dạng một cây các đối tượng, trong đó mỗi phần tử HTML, thuộc tính và nội dung của chúng đều là một đối tượng có thể được thao tác thông qua JavaScript. DOM cho phép JavaScript tương tác trực tiếp với các phần tử HTML, từ đó thay đổi nội dung, cấu trúc và kiểu dáng của trang web một cách linh hoạt.

Tại sao cần thay đổi CSS bằng JavaScript?

Mặc dù CSS cho phép chúng ta định kiểu tĩnh cho các phần tử HTML, nhưng đôi khi chúng ta cần thay đổi kiểu dáng của trang web một cách động, tương tác với người dùng hoặc thay đổi giao diện dựa trên các sự kiện diễn ra trong quá trình sử dụng. Đó chính là lý do tại sao JavaScript kết hợp với DOM là một công cụ mạnh mẽ để thay đổi CSS. Cụ thể:

1. Tạo các hiệu ứng động (dynamic effects): JavaScript giúp chúng ta tạo ra các hiệu ứng chuyển động, hoạt ảnh, hoặc thay đổi giao diện ngay lập tức khi người dùng tương tác với các phần tử trên trang web.

2. Thay đổi giao diện theo sự kiện người dùng: Ví dụ, khi người dùng nhấn vào nút, di chuột qua các phần tử, nhập liệu vào form, chúng ta có thể thay đổi CSS của các phần tử này để cung cấp phản hồi trực quan cho người dùng.

3. Cải thiện trải nghiệm người dùng (UX): Việc thay đổi CSS động giúp giao diện trở nên linh hoạt, dễ thay đổi và tương tác. Điều này cải thiện trải nghiệm người dùng và tạo ra các trang web dễ sử dụng hơn.

4. Thích ứng với các tình huống khác nhau: Ví dụ, việc thay đổi giao diện của một trang web dựa trên kích thước màn hình (responsive design) hay trạng thái của người dùng (chế độ tối sáng) là những ứng dụng phổ biến mà JavaScript có thể giúp thay đổi CSS trong thời gian thực.

Lợi ích của việc thay đổi CSS động trong các ứng dụng web

1. Tăng cường tính tương tác: Việc thay đổi CSS dựa trên các sự kiện người dùng (như click, hover, scroll) tạo ra các phản hồi tức thì cho người dùng, giúp cải thiện sự tương tác giữa người dùng và ứng dụng.

2. Tạo hiệu ứng động và hoạt ảnh: Các hiệu ứng như chuyển động, làm mờ, thay đổi màu sắc hoặc các hiệu ứng nổi bật khác có thể được thực hiện bằng JavaScript để mang lại một trải nghiệm sinh động và hấp dẫn. Các hiệu ứng này có thể được kích hoạt theo sự kiện hoặc theo thời gian.

3. Tối ưu hóa trải nghiệm người dùng trên nhiều nền tảng: Khi ứng dụng web có thể thay đổi CSS linh hoạt tùy theo kích thước màn hình (responsive design) hoặc theo chế độ tối sáng (dark mode), người dùng có thể tận hưởng trải nghiệm đồng nhất trên mọi thiết bị và điều kiện sử dụng.

4. Cập nhật giao diện mà không cần tải lại trang: JavaScript giúp thay đổi CSS mà không làm gián đoạn hoặc làm lại trang web, giúp các thay đổi diễn ra mượt mà và nhanh chóng mà không cần phải tải lại toàn bộ trang.

5. Tiết kiệm tài nguyên và cải thiện hiệu suất: Thay vì phải tải lại trang hoặc gửi yêu cầu HTTP, chúng ta có thể thay đổi CSS ngay trong trình duyệt, giúp giảm tải cho server và cải thiện thời gian phản hồi của ứng dụng.

Tóm lại, việc sử dụng JavaScript để thay đổi CSS thông qua DOM không chỉ giúp tăng tính tương tác và tạo hiệu ứng đẹp mắt mà còn nâng cao khả năng thích ứng và trải nghiệm người dùng, góp phần tạo nên những ứng dụng web hiện đại, linh hoạt và dễ sử dụng.

Các phương thức thay đổi CSS trong HTML DOM trong JavaScript

Trong JavaScript, có hai cách chính để thay đổi CSS của các phần tử HTML: sử dụng element.style và element.classList. Mỗi phương thức có những ưu điểm và hạn chế riêng, phù hợp với các tình huống khác nhau. Sau đây là chi tiết về từng phương thức.

Sử dụng element.style để thay đổi CSS trực tiếp

Cú pháp cơ bản:

element.style.property = "value";

• property: tên thuộc tính CSS cần thay đổi (ví dụ: backgroundColor, width, fontSize).

• value: giá trị của thuộc tính CSS (ví dụ: red, 100px, 16px).

Ví dụ thực tế:

Thay đổi màu nền:

document.getElementById("myElement").style.backgroundColor = "blue";

• Trong ví dụ này, màu nền của phần tử với id="myElement" sẽ được thay đổi thành màu xanh lam.

Thay đổi chiều rộng và chiều cao:

document.getElementById("myElement").style.width = "200px";
document.getElementById("myElement").style.height = "100px";

• Cả chiều rộng và chiều cao của phần tử sẽ được thay đổi.

Thay đổi font-size:

document.getElementById("myElement").style.fontSize = "20px";

• Phần tử sẽ có kích thước chữ là 20px.

Thay đổi margin và padding:

document.getElementById("myElement").style.margin = "10px";
document.getElementById("myElement").style.padding = "15px";

Lề và đệm của phần tử sẽ được điều chỉnh.

Hạn chế và lưu ý khi sử dụng element.style:

• Không hỗ trợ các thuộc tính CSS phức tạp: element.style chỉ hoạt động với các thuộc tính CSS được viết theo dạng camelCase trong JavaScript (ví dụ: backgroundColor, fontSize). Các thuộc tính CSS dạng kebab-case (như background-color, font-size) không thể sử dụng trực tiếp với element.style.

• Chỉ thay đổi các thuộc tính trực tiếp: Khi thay đổi CSS bằng element.style, các thuộc tính CSS sẽ thay đổi trực tiếp mà không ảnh hưởng đến các class hoặc CSS bên ngoài (từ tệp CSS hoặc style inline khác). Điều này có thể gây ra sự cố trong một số trường hợp khi bạn muốn giữ các quy tắc CSS hiện tại.

• Không thể thao tác với tất cả các thuộc tính: Một số thuộc tính CSS như display, visibility, hoặc position có thể khó thao tác qua element.style. Thay vào đó, chúng ta có thể sử dụng phương pháp thay đổi class hoặc classList.

Sử dụng classList để thay đổi class của phần tử

classList là một đối tượng cung cấp các phương thức để thao tác với các class của phần tử HTML. Các phương thức chính của classList bao gồm:

• add(className): Thêm một hoặc nhiều class vào phần tử.

• remove(className): Xóa một hoặc nhiều class khỏi phần tử.

• toggle(className): Chuyển đổi trạng thái của class (nếu class có, xóa; nếu không có, thêm vào).

Khi nào nên sử dụng classList thay vì style?

• Quản lý các kiểu đã định trước trong CSS: Khi bạn muốn thay đổi các kiểu CSS mà không cần viết lại trực tiếp các thuộc tính CSS trong JavaScript, bạn có thể sử dụng classList để thêm hoặc xóa các lớp (class) đã được định nghĩa trong tệp CSS. Điều này giúp giữ cho mã JavaScript sạch sẽ và dễ bảo trì.

• Quản lý nhiều thuộc tính CSS cùng lúc: Nếu bạn muốn thay đổi nhiều thuộc tính CSS cùng một lúc mà không cần viết nhiều dòng mã cho mỗi thuộc tính, classList là sự lựa chọn tuyệt vời. Thay vì thao tác từng thuộc tính CSS một cách thủ công, bạn chỉ cần thay đổi class và toàn bộ các thuộc tính CSS tương ứng sẽ được áp dụng.

Ví dụ thực tế:

Thêm một class cho phần tử:

document.getElementById("myElement").classList.add("newClass");

• Phần tử myElement sẽ được thêm một class mới có tên là newClass. Class này có thể chứa các thuộc tính CSS đã được định nghĩa trong tệp CSS.

Xóa một class khỏi phần tử:

document.getElementById("myElement").classList.remove("oldClass");

• Phần tử sẽ không còn class oldClass, giúp loại bỏ các kiểu CSS đã được áp dụng trước đó.

Chuyển đổi class (toggle):

document.getElementById("myElement").classList.toggle("highlight");

• Nếu phần tử đã có class highlight, thì class này sẽ bị xóa. Nếu không có, class này sẽ được thêm vào, giúp thay đổi giao diện phần tử mà không cần viết lại các thuộc tính CSS.

Thêm hoặc xóa nhiều class cùng lúc:

document.getElementById("myElement").classList.add("newClass1", "newClass2");
document.getElementById("myElement").classList.remove("oldClass");

Cả hai class newClass1 và newClass2 sẽ được thêm vào, trong khi oldClass sẽ bị xóa.

Sử dụng CSS Variables (CSS Custom Properties) trong JavaScript

Khái niệm về CSS Variables

CSS Variables (hay còn gọi là CSS Custom Properties) là các biến được định nghĩa trong CSS và có thể được sử dụng để lưu trữ giá trị có thể thay đổi trong suốt các phần tử trong một trang web. Thay vì lặp lại các giá trị như màu sắc, font-size, hoặc margin ở nhiều nơi trong mã CSS, bạn có thể sử dụng CSS Variables để dễ dàng quản lý và thay đổi các giá trị đó.

Cú pháp định nghĩa CSS Variables:

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

Trong ví dụ trên:

• --primary-color và --font-size là hai biến CSS được định nghĩa trong phạm vi :root, tức là chúng có thể được sử dụng trong toàn bộ tài liệu HTML.

• Các giá trị của biến CSS có thể được thay đổi động qua JavaScript, giúp việc thay đổi giao diện trang web trở nên linh hoạt và dễ dàng hơn.

Cách sử dụng setProperty() để thay đổi giá trị của CSS Variables

Trong JavaScript, bạn có thể sử dụng phương thức setProperty() của đối tượng style để thay đổi giá trị của một CSS Variable tại runtime. Phương thức setProperty() cho phép bạn thay đổi các biến CSS của phần tử DOM hoặc toàn bộ tài liệu.

Cú pháp:

element.style.setProperty('--variable-name', 'new-value');

• --variable-name: Tên của biến CSS cần thay đổi (chú ý rằng tên biến luôn bắt đầu với dấu --).

• 'new-value': Giá trị mới mà bạn muốn gán cho biến CSS.

Ví dụ thực tế:

Thay đổi màu nền thông qua biến CSS: Giả sử bạn đã định nghĩa một biến CSS cho màu nền:

:root {
  --background-color: lightblue;
}

Và trong JavaScript, bạn có thể thay đổi giá trị của --background-color như sau:

document.documentElement.style.setProperty('--background-color', 'pink');

<button onclick="changeColor()">Thay đổi màu</button>
<div id="myElement" style="width: 100px; height: 100px; background-color: var(--primary-color);">
  Phần tử này có màu nền thay đổi.
</div>

:root {
  --primary-color: green;
}

function changeColor() {
  document.documentElement.style.setProperty('--primary-color', 'purple');
}

:root {
  --text-color: black;
  --font-size: 16px;
}

function changeStyles() {
  document.documentElement.style.setProperty('--text-color', 'red');
  document.documentElement.style.setProperty('--font-size', '20px');
}

<button onclick="changeStyles()">Thay đổi kiểu chữ</button>
<p style="color: var(--text-color); font-size: var(--font-size);">Đoạn văn bản sẽ thay đổi màu sắc và kích thước.</p>

<button id="myButton">Di chuột vào tôi!</button>

let button = document.getElementById("myButton");

button.addEventListener("mouseover", function() {
  button.style.backgroundColor = "green";  // Thay đổi màu nền khi di chuột vào
});

button.addEventListener("mouseout", function() {
  button.style.backgroundColor = "blue";   // Quay lại màu nền ban đầu khi di chuột ra
});

<button id="myButton">Nhấn tôi!</button>

let button = document.getElementById("myButton");

button.addEventListener("click", function() {
  button.style.backgroundColor = "red";  // Thay đổi màu nền khi nhấn chuột
  button.style.color = "white";          // Thay đổi màu chữ
});

<input type="text" id="username" placeholder="Nhập tên người dùng">

let input = document.getElementById("username");

input.addEventListener("input", function() {
  if (input.value.length > 0) {
    input.style.borderColor = "green";  // Thay đổi màu viền khi có nhập liệu
  } else {
    input.style.borderColor = "red";    // Đặt lại màu viền khi ô input trống
  }
});

<input type="text" id="email" placeholder="Nhập email">

let emailInput = document.getElementById("email");

emailInput.addEventListener("focus", function() {
  emailInput.style.backgroundColor = "lightyellow";  // Màu nền thay đổi khi nhận focus
});

emailInput.addEventListener("blur", function() {
  emailInput.style.backgroundColor = "white";  // Màu nền quay lại khi mất focus
});

<button id="createElementBtn">Tạo phần tử mới</button>
<div id="container"></div>

let button = document.getElementById("createElementBtn");
let container = document.getElementById("container");

button.addEventListener("click", function() {
  // Tạo một phần tử div mới
  let newDiv = document.createElement("div");
  
  // Thêm nội dung cho phần tử div
  newDiv.textContent = "Đây là phần tử mới!";
  
  // Thêm CSS cho phần tử mới
  newDiv.style.backgroundColor = "lightblue";
  newDiv.style.padding = "20px";
  newDiv.style.margin = "10px";
  newDiv.style.borderRadius = "5px";
  
  // Thêm phần tử mới vào container
  container.appendChild(newDiv);
});

<button id="addElement">Thêm phần tử</button>
<button id="removeElement">Xóa phần tử</button>
<div id="container"></div>

let addButton = document.getElementById("addElement");
let removeButton = document.getElementById("removeElement");
let container = document.getElementById("container");

addButton.addEventListener("click", function() {
  let newDiv = document.createElement("div");
  newDiv.textContent = "Phần tử mới!";
  newDiv.style.backgroundColor = "yellow";
  newDiv.style.padding = "20px";
  newDiv.style.margin = "10px";
  newDiv.style.opacity = "0"; // Ban đầu opacity là 0
  container.appendChild(newDiv);

  // Sử dụng setTimeout để thêm hiệu ứng động
  setTimeout(function() {
    newDiv.style.transition = "opacity 0.5s ease-in-out"; // Hiệu ứng mờ dần
    newDiv.style.opacity = "1"; // Tăng opacity lên 1
  }, 10); // Chạy hiệu ứng ngay sau khi phần tử được thêm
});

removeButton.addEventListener("click", function() {
  let divs = container.getElementsByTagName("div");
  if (divs.length > 0) {
    let lastDiv = divs[divs.length - 1];
    lastDiv.style.transition = "opacity 0.5s ease-in-out"; // Hiệu ứng mờ dần khi xóa
    lastDiv.style.opacity = "0";
    
    // Sau khi hiệu ứng xong, xóa phần tử khỏi DOM
    setTimeout(function() {
      container.removeChild(lastDiv);
    }, 500); // Thời gian trễ để chờ hiệu ứng mờ dần
  }
});

<button id="moveButton">Di chuyển phần tử</button>
<div id="animatedDiv">Chuyển động!</div>

#animatedDiv {
  width: 100px;
  height: 100px;
  background-color: coral;
  position: relative;
  transition: left 2s; /* Chuyển động mượt mà trong 2 giây */
}

let moveButton = document.getElementById("moveButton");
let animatedDiv = document.getElementById("animatedDiv");

moveButton.addEventListener("click", function() {
  // Thay đổi CSS bằng JavaScript để di chuyển phần tử
  animatedDiv.style.left = "300px"; // Di chuyển phần tử sang phải
});