Hướng dẫn JavaScript DOM: Thay đổi kiểu dáng và lớp
Một trang web không chỉ đơn thuần là nội dung. Cách nó hiển thị và phản ứng với hành động của người dùng tạo nên trải nghiệm thực sự. Trong JavaScript, Mô hình đối tượng tài liệu (DOM) hoạt động như cầu nối giữa cấu trúc HTML của bạn và các tập lệnh có thể thay đổi nó. Bằng cách học cách thao tác kiểu dáng và lớp, bạn có thể làm cho một trang trở nên sống động; bất kể đó là chuyển đổi giữa chế độ sáng và tối, làm nổi bật các liên kết hoạt động, hoặc hoạt ảnh các phần tử khi nhấp.
Hướng dẫn này được thiết kế cho người mới bắt đầu muốn có một sự giới thiệu rõ ràng và thực tiễn về việc thay đổi kiểu dáng và lớp với JavaScript.
Những gì bạn sẽ học được
Cuối cùng, bạn sẽ hiểu:
- Cách chọn các phần tử HTML trước khi áp dụng thay đổi.
- Cách sử dụng
classListđể thêm, xóa, chuyển đổi và thay thế các lớp. - Cách áp dụng kiểu dáng nội tuyến trực tiếp bằng JavaScript.
- Cách cập nhật các biến CSS (thuộc tính tùy chỉnh) cho các chủ đề động.
- Các phương pháp tốt nhất để giữ cho mã của bạn đơn giản, dễ truy cập và dễ bảo trì.
Chọn phần tử bạn muốn thay đổi kiểu dáng
Trước khi bạn có thể thay đổi bất cứ điều gì, bạn cần phải chọn nó.
Mã nguồn HTML:
html
<button id="toggleBtn">Chuyển đổi chủ đề</button>
<div class="card" id="feature">Xin chào thế giới</div>Mã nguồn JavaScript:
javascript
const button = document.getElementById('toggleBtn');
const card = document.querySelector('#feature');Điều này cung cấp cho JavaScript một "tay cầm" để làm việc. Nếu không chọn, bạn không thể thay đổi kiểu dáng.
Thay đổi lớp với classList (cách tốt nhất)
Cách dễ nhất và đáng tin cậy nhất để thay đổi kiểu dáng của các phần tử là chuyển đổi lớp. Điều này giữ tất cả các quy tắc thiết kế bên trong CSS của bạn.
Ví dụ
javascript
card.classList.add('highlight'); // thêm kiểu dáng
card.classList.remove('hidden'); // xóa kiểu dáng
card.classList.toggle('active'); // bật/tắt một lớp
card.classList.replace('old', 'new'); // hoán đổi các lớpTại sao sử dụng lớp thay vì kiểu dáng nội tuyến?
- Các kiểu dáng vẫn nằm trong tệp CSS của bạn, không bị phân tán qua JavaScript.
- Dễ duy trì và gỡ lỗi hơn.
- Hoạt động tốt với các hoạt ảnh và chuyển tiếp CSS.
Áp dụng kiểu dáng nội tuyến với .style
Đôi khi, bạn cần một kiểu dáng tạm thời hoặc động, chẳng hạn như cài đặt chiều rộng dựa trên đầu vào của người dùng. Trong những trường hợp đó, hãy sử dụng thuộc tính style.
javascript
card.style.backgroundColor = 'blue';
card.style.padding = '16px';
card.style.opacity = '0.8';Hoặc áp dụng nhiều kiểu một lần:
javascript
card.style.cssText = 'color: white; background-color: navy; padding: 12px;';Mẹo: Sử dụng kiểu dáng nội tuyến một cách tiết kiệm. Chúng ghi đè quy tắc CSS, làm cho kiểu dáng khó quản lý hơn.
Cập nhật biến CSS bằng JavaScript
Các thuộc tính tùy chỉnh CSS (biến) mang đến cho bạn một cách mạnh mẽ để quản lý các chủ đề hoặc sơ đồ màu sắc.
Mã nguồn CSS:
css
:root {
--bg: #ffffff;
--text: #111111;
}
body {
background: var(--bg);
color: var(--text);
}Mã nguồn JavaScript:
javascript
document.documentElement.style.setProperty('--bg', '#111111');
document.documentElement.style.setProperty('--text', '#eeeeee');Điều này thay đổi vẻ bề ngoài ở mọi nơi mà các biến đó được sử dụng, hoàn hảo cho việc chuyển đổi chủ đề.
Tích hợp tất cả lại với nhau (Ví dụ chuyển đổi chủ đề)
Dưới đây là một ví dụ hoàn chỉnh sử dụng classList và các biến CSS cho một bộ chuyển đổi chủ đề thân thiện với người mới bắt đầu.
Mã nguồn HTML:
html
<button id="toggleBtn" aria-pressed="false">Chuyển sang tối</button>
<main class="content">Chào mừng đến với trang của tôi!</main>Mã nguồn CSS:
css
:root {
--bg: #ffffff;
--text: #111111;
}
body {
background: var(--bg);
color: var(--text);
transition: background 0.3s, color 0.3s;
}
.dark {
--bg: #111111;
--text: #eeeeee;
}Mã nguồn JavaScript:
javascript
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
const darkMode = document.documentElement.classList.contains('dark');
btn.setAttribute('aria-pressed', String(darkMode));
btn.textContent = darkMode ? 'Chuyển sang sáng' : 'Chuyển sang tối';
});Kịch bản đơn giản này:
- Chuyển đổi giữa các chủ đề tối và sáng.
- Sử dụng một lớp
.darkduy nhất cho CSS sạch sẽ. - Cập nhật văn bản nút và thuộc tính truy cập.
Các phương pháp tốt nhất cho người mới bắt đầu
- Sử dụng lớp trước. Giữ kiểu dáng nội tuyến cho các giá trị tính toán.
- Giữ CSS trong tệp của bạn. JavaScript chỉ nên nói cho CSS khi áp dụng nó.
- Suy nghĩ về khả năng truy cập. Cập nhật các thuộc tính ARIA và văn bản nút khi kiểu dáng thay đổi.
- Tránh lộn xộn. Đừng trộn lẫn logic kiểu dáng ở mọi nơi; giữ cho nó được tổ chức.
Kết luận
Thay đổi kiểu dáng và lớp với JavaScript là một trong những bước đầu tiên để làm cho các trang web cảm thấy sống động. Bạn đã học cách chọn các phần tử, sử dụng classList để quản lý lớp sạch sẽ, áp dụng kiểu dáng nội tuyến khi cần thiết và thậm chí cập nhật các biến CSS để điều khiển chủ đề.
Khi bạn thực hành, hãy tập trung vào việc giữ các kiểu dáng trong CSS và sử dụng JavaScript để kích hoạt chúng. Cách tiếp cận này làm cho các dự án của bạn dễ bảo trì hơn, dễ truy cập hơn và chuyên nghiệp hơn rất nhiều. Với những kỹ năng này, bạn có thể bắt đầu xây dựng các trang động, tương tác phản hồi một cách tuyệt vời với hành động của người dùng.
Bạn có thể liên hệ với tôi qua LinkedIn.
