JavaScript - Thay đổi CSS

Chào mừng các bạn đang học lập trình! Hôm nay, chúng ta sẽ khám phá thế giới đầy thú vị của JavaScript và cách nó có thể thay đổi CSS một cách động. Hãy tưởng tượng bạn có thể挥动 một枝魔杖 và ngay lập tức thay đổi ngoại hình của trang web của bạn - đó là sức mạnh mà chúng ta sắp解锁! Nào, hãy lấy những枝魔杖隐喻 (bàn phím) của bạn và bắt đầu nhé!

Thay đổi CSS bằng JavaScript

JavaScript cung cấp cho chúng ta những công cụ mạnh mẽ để thao tác CSS của các phần tử HTML. Khả năng này cho phép chúng ta tạo ra các trang web động, tương tác mà phản hồi với các hành động của người dùng hoặc các sự kiện khác.

Cơ bản: Truy cập và Thay đổi các Thuộc tính CSS

Hãy bắt đầu từ những nguyên tắc cơ bản. Để thay đổi CSS bằng JavaScript, trước tiên chúng ta cần chọn phần tử mà chúng ta muốn thay đổi. Chúng ta có thể làm điều này bằng cách sử dụng các phương thức như getElementById(), querySelector() hoặc getElementsByClassName().

Dưới đây là một ví dụ đơn giản:

// Chọn phần tử
let myElement = document.getElementById('myDiv');

// Thay đổi màu nền của nó
myElement.style.backgroundColor = 'blue';

Trong ví dụ này, chúng ta đang chọn một phần tử có ID 'myDiv' và thay đổi màu nền của nó thành xanh lam. Đơn giản phải không?

Nhưng đợi đã, còn nhiều hơn nữa! Chúng ta có thể thay đổi nhiều thuộc tính cùng một lúc:

let myElement = document.getElementById('myDiv');
myElement.style.backgroundColor = 'blue';
myElement.style.color = 'white';
myElement.style.padding = '10px';
myElement.style.borderRadius = '5px';

Nhớ rằng, khi sử dụng JavaScript để thay đổi CSS, chúng ta sử dụng camelCase cho các tên thuộc tính thay vì kebab-case. Vậy background-color trở thành backgroundColor.

Thay đổi Classes

Đôi khi, thay vì thay đổi từng thuộc tính riêng lẻ, việc thay đổi toàn bộ các class sẽ hiệu quả hơn. JavaScript cũng cho phép chúng ta làm điều này!

let myElement = document.getElementById('myDiv');

// Thêm một class
myElement.classList.add('highlight');

// Xóa một class
myElement.classList.remove('old-class');

// Chuyển đổi một class (thêm nếu không có, xóa nếu có)
myElement.classList.toggle('active');

Phương pháp này đặc biệt hữu ích khi bạn có các style định nghĩa sẵn trong CSS mà bạn muốn áp dụng hoặc xóa bỏ một cách động.

Thay đổi Style của Phần Tử Khi Sự Kiện Kích Hoạt

Bây giờ, hãy làm cho mọi thứ trở nên tương tác! Chúng ta có thể thay đổi các style trong phản ứng với các sự kiện như nhấp chuột, di chuột hoặc nhấn phím.

Sự Kiện Nhấp Chuột

Dưới đây là một ví dụ về thay đổi màu sắc của một nút khi nó bị nhấp:

let myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
this.style.backgroundColor = 'red';
this.style.color = 'white';
});

Mỗi khi nút bị nhấp, nó sẽ chuyển thành màu đỏ với chữ trắng. Thật kỳ diệu phải không?

Sự Kiện Di Chuột Vào và Ra

Hãy tạo một hiệu ứng hover vui nhộn:

let myDiv = document.getElementById('myDiv');

myDiv.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.1)';
this.style.transition = 'transform 0.3s';
});

myDiv.addEventListener('mouseout', function() {
this.style.transform = 'scale(1)';
});

Bây giờ, khi bạn di chuột vào div, nó sẽ略微增大 kích thước, và khi bạn di chuột ra, nó sẽ trở về kích thước ban đầu. Như thể div đang thở!

Thay đổi CSS của các Phần Tử HTML Động

Đôi khi, chúng ta cần thay đổi các style dựa trên các điều kiện nhất định hoặc đầu vào của người dùng. Đây là nơi JavaScript thực sự tỏa sáng trong việc thao tác CSS.

Thay đổi Style Dựa trên Đầu Vào của Người Dùng

Hãy tạo một bộ chuyển đổi theme đơn giản:

let themeSelect = document.getElementById('themeSelect');
let body = document.body;

themeSelect.addEventListener('change', function() {
switch(this.value) {
case 'light':
body.style.backgroundColor = 'white';
body.style.color = 'black';
break;
case 'dark':
body.style.backgroundColor = 'black';
body.style.color = 'white';
break;
case 'blue':
body.style.backgroundColor = 'lightblue';
body.style.color = 'darkblue';
break;
}
});

Mã này cho phép người dùng chọn một theme, và màu sắc của trang sẽ thay đổi tương ứng. Như thể bạn đang cho người dùng một cọ vẽ cho trang web của bạn!

Thay đổi Style Động

Chúng ta thậm chí có thể tạo ra các chuyển đổi mượt mà giữa các thay đổi style:

let growButton = document.getElementById('growButton');
let myDiv = document.getElementById('myDiv');

growButton.addEventListener('click', function() {
myDiv.style.transition = 'all 0.5s ease-in-out';
myDiv.style.width = (myDiv.offsetWidth + 50) + 'px';
myDiv.style.height = (myDiv.offsetHeight + 50) + 'px';
});

Mỗi khi nút bị nhấp, div sẽ增大 50 pixel ở mỗi chiều, với một animation mượt mà.

Các Phương Pháp Thay đổi CSS bằng JavaScript

Dưới đây là bảng tóm tắt các phương pháp chính mà chúng ta đã thảo luận để thay đổi CSS bằng JavaScript:

Phương pháp	Mô tả	Ví dụ
Thao tác style trực tiếp	Thay đổi từng thuộc tính CSS	element.style.property = 'value'
classList.add()	Thêm một class vào phần tử	element.classList.add('className')
classList.remove()	Xóa một class khỏi phần tử	element.classList.remove('className')
classList.toggle()	Chuyển đổi class trên phần tử (thêm nếu không có, xóa nếu có)	element.classList.toggle('className')
setAttribute()	Đặt bất kỳ thuộc tính nào, bao gồm 'style'	element.setAttribute('style', 'property: value;')

Nhớ rằng, chìa khóa để thành thạo các kỹ thuật này là thực hành. Hãy thử triển khai các ví dụ này, experiment với chúng, và sớm bạn sẽ trở thành một chuyên gia trong việc tạo ra các trang web động, tương tác! Chúc các bạn may mắn, các pháp sư web tương lai!

Credits: Image by storyset