Thao tác CSS bằng JavaScript và jQuery

Javascript căn bản | 24/05/2025 by Học Javascript

Trong thế giới phát triển web hiện đại, trải nghiệm người dùng không chỉ phụ thuộc vào nội dung mà còn chịu ảnh hưởng lớn bởi giao diện và sự tương tác linh hoạt. Chính vì vậy, việc thay đổi giao diện động thông qua mã lệnh thay vì viết tay trong file CSS đã trở thành một kỹ năng quan trọng. JavaScript và jQuery – hai công cụ quen thuộc của lập trình web – không chỉ giúp xử lý sự kiện, thao tác DOM mà còn cho phép chúng ta dễ dàng can thiệp và thay đổi các thuộc tính CSS của phần tử trên trang.

Việc thao tác CSS bằng JavaScript và jQuery mang lại sự linh hoạt cao, từ việc thay đổi màu sắc, vị trí, kích thước cho đến việc ẩn hiện, chuyển động các phần tử một cách mượt mà. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng JavaScript và jQuery để thao tác với CSS, từ những cú pháp cơ bản đến những ứng dụng thực tế thú vị.

Thao tác CSS bằng JavaScript

Thêm, sửa, xoá CSS bằng thuộc tính style

Trong JavaScript, mỗi phần tử HTML đều có một thuộc tính style cho phép bạn truy cập và thay đổi trực tiếp các thuộc tính CSS của phần tử đó. Đây là cách đơn giản và phổ biến nhất để thao tác CSS một cách trực tiếp.

Cú pháp:

element.style.property = "value";

Lưu ý: thuộc tính CSS phải được viết theo dạng camelCase trong JavaScript. Ví dụ: background-color → backgroundColor, font-size → fontSize.

Ví dụ:

document.getElementById("box").style.backgroundColor = "red";
document.getElementById("box").style.width = "200px";
document.getElementById("box").style.display = "none";

Với đoạn mã trên, phần tử có id="box" sẽ:

Có nền màu đỏ
Rộng 200px
Bị ẩn khỏi giao diện (display: none)

Lưu ý:

Sử dụng element.style.property sẽ ghi đè các giá trị CSS hiện tại của phần tử đó.
Nếu bạn cần thay đổi nhiều thuộc tính, có thể viết nhiều dòng hoặc dùng class để tiện quản lý hơn.

Sử dụng classList để thêm/xoá/lật lớp CSS

Để thay đổi giao diện mà không can thiệp trực tiếp vào từng thuộc tính, cách làm hiệu quả hơn là thao tác với class CSS đã định nghĩa sẵn.

Cú pháp:

element.classList.add("className");      // Thêm class
element.classList.remove("className");   // Xoá class
element.classList.toggle("className");   // Nếu có thì xoá, nếu chưa có thì thêm

Ví dụ:

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

// Thêm hiệu ứng highlight
box.classList.add("highlight");

// Gỡ bỏ hiệu ứng nếu không cần
box.classList.remove("highlight");

// Chuyển trạng thái highlight mỗi khi click
box.classList.toggle("highlight");

Ưu điểm:

Gọn gàng, dễ quản lý.
Không ghi đè các thuộc tính CSS hiện tại, vì chỉ đơn giản là thêm hoặc xoá tên class.
Dễ dàng mở rộng hoặc cập nhật giao diện bằng cách sửa file CSS.

Lấy và ghi giá trị CSS bằng getComputedStyle

Đôi khi, bạn muốn lấy giá trị CSS thực sự đang được áp dụng cho một phần tử – ví dụ như chiều rộng đã tính toán, màu nền thực tế,… Trong trường hợp này, bạn không thể chỉ dựa vào element.style, vì nó chỉ chứa những gì được đặt qua JavaScript, mà không phản ánh giá trị CSS từ stylesheet bên ngoài.

Cú pháp:

const style = window.getComputedStyle(element);
const value = style.getPropertyValue("property-name");

Ví dụ:

const box = document.getElementById("box");
const bgColor = window.getComputedStyle(box).getPropertyValue("background-color");
console.log("Màu nền của box là:", bgColor);

Khi nào cần dùng `getComputedStyle`?

Khi bạn cần lấy giá trị thật sự của CSS đang được áp dụng (bao gồm cả từ file CSS ngoài).
Khi bạn cần tính toán kích thước, vị trí để làm animation, layout động,...
Khi muốn kiểm tra trạng thái hiện tại của phần tử trước khi thay đổi.

Thao tác CSS bằng jQuery

jQuery là một thư viện JavaScript giúp đơn giản hóa việc tương tác với DOM, xử lý sự kiện, và đặc biệt là thao tác với CSS. Cú pháp ngắn gọn, dễ đọc của jQuery giúp tăng tốc quá trình phát triển giao diện web một cách đáng kể.

Thay đổi thuộc tính CSS bằng .css()

Phương thức .css() trong jQuery cho phép đọc và ghi giá trị các thuộc tính CSS một cách nhanh chóng.

Cú pháp:

Đọc giá trị thuộc tính CSS:

$(selector).css("property");

Ghi giá trị một thuộc tính CSS:

$(selector).css("property", "value");

Ghi nhiều thuộc tính cùng lúc:

$(selector).css({
  "property1": "value1",
  "property2": "value2"
});

Ví dụ:

// Đổi màu nền và chiều rộng của phần tử có class "box"
$(".box").css("background-color", "blue");
$(".box").css("width", "300px");

// Ghi nhiều thuộc tính một lúc
$(".box").css({
  "height": "200px",
  "border": "2px solid black"
});

// Lấy giá trị hiện tại của font-size
let fontSize = $(".box").css("font-size");
console.log("Font-size hiện tại là:", fontSize);

Ưu điểm:

Cú pháp ngắn gọn, dễ hiểu.
Có thể gán nhiều thuộc tính một lần.
Dễ dàng kết hợp với các hiệu ứng hoặc sự kiện.

Thêm/xoá/lật class bằng .addClass(), .removeClass(), .toggleClass()

Tương tự như classList trong JavaScript, jQuery cung cấp các phương thức giúp thao tác với class CSS của phần tử, nhưng với cú pháp đơn giản hơn và hỗ trợ đồng bộ nhiều phần tử cùng lúc.

Cú pháp:

$(selector).addClass("className");     // Thêm class
$(selector).removeClass("className");  // Xoá class
$(selector).toggleClass("className");  // Lật class: có thì xoá, chưa có thì thêm

Ví dụ:

// Thêm class 'highlight' vào tất cả phần tử có class 'box'
$(".box").addClass("highlight");

// Gỡ bỏ class 'active'
$(".box").removeClass("active");

// Tự động bật/tắt class mỗi khi click
$(".box").click(function() {
  $(this).toggleClass("selected");
});

Ưu điểm:

Gọn gàng, không ghi đè các CSS khác.
Có thể áp dụng hàng loạt phần tử.
Phù hợp với các thao tác giao diện tương tác như: highlight, hover, active,...

Ẩn/hiện phần tử với hiệu ứng CSS

Một trong những điểm mạnh của jQuery là hỗ trợ ẩn/hiện phần tử với hiệu ứng mượt mà, giúp giao diện trở nên sinh động hơn.

Các phương thức phổ biến:

.hide() – Ẩn phần tử ngay lập tức.
.show() – Hiện phần tử ngay lập tức.
.fadeIn() – Hiện phần tử với hiệu ứng mờ dần.
.fadeOut() – Ẩn phần tử với hiệu ứng mờ dần.
.slideUp() – Ẩn phần tử theo hiệu ứng trượt lên.
.slideDown() – Hiện phần tử theo hiệu ứng trượt xuống.
.slideToggle() – Luân phiên giữa slideUp và slideDown.

Ví dụ:

// Ẩn phần tử
$(".box").hide();

// Hiện phần tử với hiệu ứng mờ
$(".box").fadeIn(500);

// Trượt ẩn/hiện khi click
$("#toggleBtn").click(function() {
  $(".box").slideToggle();
});

Tham số thời gian:

Có thể truyền vào giá trị thời gian (miliseconds) để kiểm soát tốc độ hiệu ứng, ví dụ: fadeIn(400).

So sánh JavaScript và jQuery trong thao tác CSS

Khi thao tác với CSS bằng mã lệnh, cả JavaScript thuần (Vanilla JS) và jQuery đều là những công cụ mạnh mẽ. Tuy nhiên, mỗi cách đều có ưu – nhược điểm riêng, và việc lựa chọn công cụ phù hợp sẽ phụ thuộc vào nhu cầu và đặc điểm của dự án.

Cú pháp

jQuery:

Ngắn gọn, dễ viết, dễ đọc và dễ bảo trì.
Tối ưu cho những người mới học hoặc cần thao tác nhanh.

Ví dụ:

// jQuery
$(".box").css("color", "blue");

JavaScript:

Cần viết dài hơn và phải xử lý thêm các bước như chọn phần tử, chuyển đổi cú pháp CSS sang camelCase,...

Ví dụ:

// JavaScript
document.querySelector(".box").style.color = "blue";

So sánh: jQuery giúp rút ngắn đáng kể số dòng code, đặc biệt khi thao tác nhiều phần tử cùng lúc.

Khả năng tương thích trình duyệt

jQuery:

Tự động xử lý sự khác biệt giữa các trình duyệt (cross-browser).
Đặc biệt hữu ích với những trình duyệt cũ như IE9 trở về trước.

JavaScript:

Ở các phiên bản trình duyệt hiện đại (Chrome, Firefox, Edge…), JavaScript thuần đã rất ổn định.
Tuy nhiên, nếu muốn hỗ trợ trình duyệt cũ, lập trình viên cần tự xử lý các vấn đề tương thích.

So sánh: jQuery chiếm ưu thế trong việc đảm bảo tính nhất quán giữa các trình duyệt, giúp tiết kiệm thời gian kiểm thử và xử lý lỗi giao diện.

Hiệu năng

JavaScript:

Nhanh và nhẹ hơn, vì không cần tải thư viện ngoài.
Phù hợp với các tác vụ đơn giản, hiệu ứng nhẹ hoặc cần tối ưu hiệu suất.

jQuery:

Dù không chậm, nhưng vẫn có một lớp trung gian (thư viện jQuery) làm tăng kích thước trang.
Với các ứng dụng lớn, dùng jQuery nhiều có thể ảnh hưởng đến tốc độ tải trang.

So sánh: JavaScript phù hợp với ứng dụng nhẹ, nơi hiệu suất là ưu tiên. jQuery thích hợp hơn với ứng dụng trung bình đến lớn, nơi cần viết nhanh và quản lý dễ dàng.

Kết bài

Việc thao tác CSS bằng JavaScript và jQuery không chỉ giúp lập trình viên điều khiển giao diện một cách linh hoạt và sinh động, mà còn mở ra nhiều khả năng trong việc xây dựng trải nghiệm người dùng hiện đại, tương tác hơn. Tùy vào quy mô dự án, yêu cầu hiệu năng, và đối tượng người dùng mà bạn có thể lựa chọn sử dụng JavaScript thuần hay jQuery để thực hiện các thao tác CSS một cách hiệu quả.

JavaScript thuần mang đến hiệu suất tối ưu và kiểm soát chi tiết, trong khi jQuery lại giúp rút ngắn thời gian phát triển nhờ cú pháp ngắn gọn và khả năng tương thích tốt. Nắm vững cả hai công cụ này sẽ giúp bạn trở thành một lập trình viên web linh hoạt, dễ dàng thích nghi với mọi loại dự án và yêu cầu từ phía khách hàng hoặc đội ngũ kỹ thuật.