Attributes Và Style Trong DOM JavaScript

Javascript Lập Trình
03/04/2025
19 minutes read

Thuộc tính (attributes) và style là một trong những yếu tố giúp chúng ta có thể thao tác với các phần tử trên trang dễ dàng hơn. Trong bài viết hôm nay mình sẽ hướng dẫn bạn cách truy cập và thay đổi thuộc tính HTML cũng như cách xử lý và áp dụng style cho phần tử bằng Javascript nha.

Table of Contents

Thuộc Tính (Attributes) Là Gì?

Trong HTML, mỗi phần tử có thể có một hay nhiều thuộc tính để mô tả các đặc tính của nó. Để hiểu rõ hơn bạn xem một số thuộc tính thông dụng dưới đây nha.

id: Xác định duy nhất một phần tử trên trang.
class: Dùng để nhóm các phần tử có cùng kiểu hay chức năng.
href: Xác định URL mà một liên kết trỏ đến.
src: Chỉ định nguồn của một hình ảnh hoặc tệp đa phương tiện.

Những thuộc tính này không chỉ giúp trình duyệt hiểu được cách hiển thị nội dung mà chúng ta còn có thể thao tác với các thuộc tính này, thay đổi giao diện, điều hướng trang hay cập nhật nội dung cho phần tử một cách dễ dàng.

Các Cách Truy Cập Thuộc Tính bằng Javascript

Chúng ta có hai cách chính để truy cập thuộc tính của một phần tử HTML trong JavaScript là:

Truy Cập Trực Tiếp

Mỗi phần tử HTML được tham chiếu thành một đối tượng trong JavaScript. Ví dụ, nếu bạn có một hình ảnh với thuộc tính id, bạn có thể lấy giá trị của nó bằng cách:

// Giả sử trong HTML có <img id="banner" src="anh-banner.jpg" alt="Banner">
const bannerImg = document.getElementById('banner');
console.log(bannerImg.id); // Kết quả: "banner"

Trong trường hợp này, việc truy cập bannerImg.id sẽ trả về giá trị của thuộc tính id như được hiển thị trên HTML. Tuy nhiên, lưu ý rằng nếu bạn thay đổi thuộc tính này qua JavaScript thì trình duyệt sẽ tự động cập nhật giao diện dựa trên thuộc tính mới này đấy nhé.

Sử Dụng Các Phương Thức getAttribute() Và setAttribute()

Một cách khác để truy cập thuộc tính là sử dụng các phương thức có sẵn:

getAttribute(“tên-thuộc-tính”): Lấy ra giá trị gốc được khai báo trong HTML.
setAttribute(“tên-thuộc-tính”, “giá-trị-mới”): Thay đổi hoặc thiết lập lại giá trị của thuộc tính đó.

Ví dụ, nếu bạn muốn lấy giá trị href của một liên kết:

// Giả sử có <a id="link-demo" href="https://example.com" title="Liên kết demo">Demo</a>
const linkDemo = document.getElementById('link-demo');
console.log(linkDemo.getAttribute('href')); // Kết quả: "https://example.com"

Và để thay đổi giá trị này:

linkDemo.setAttribute('href', 'https://google.com');

Sự khác biệt giữa hai cách trên nằm ở chỗ khi truy cập trực tiếp (ví dụ: element.href) thì trình duyệt sẽ trả về giá trị đã được xử lý (computed value). Còn khi sử dụng getAttribute(), bạn nhận được giá trị gốc như được định nghĩa trong HTML.

Thao Tác Với Thuộc Tính Style Bằng Javascript

Mỗi phần tử HTML có thuộc tính style cho phép chúng gán trực tiếp các style CSS cho phần tử đó. Ví dụ:

<h1 id="header" style="color: magenta; font-size: 2em;">Chào Mừng!</h1>

Ở đây, bạn có thể thấy thuộc tính CSS sẽ được gắn trực tiếp bằng thẻ style HTML. Tuy nhiên, việc sử dụng inline style có nhược điểm là làm cho HTML trở nên khó bảo trì, đặc biêt là đối với các dự án lớn.

Do đó chúng ta có thể sử dụng JavaScript để thao tác với thuộc tính style của phần tử HTML thông qua thuộc tính .style của đối tượng.

Ví dụ:

// Giả sử header được chọn như trên
console.log("Màu hiện tại của header: ", header.style.color); // Nếu không có inline style, kết quả là chuỗi rỗng

// Thay đổi màu chữ của header
header.style.color = 'olive';

// Thay đổi kích cỡ chữ
header.style.fontSize = '3em';

// Thêm border cho header
header.style.border = '2px solid #ff6347';

Lưu ý: Khi truy cập các thuộc tính CSS qua .style, bạn cần chuyển đổi tên thuộc tính sang dạng camelCase đấy nhé.

font-size thành fontSize
background-color thành backgroundColor

Nếu bạn viết sai cú pháp, JavaScript sẽ không hiểu và gây ra lỗi trong chương trình.

See the Pen
Thao Tác Với Thuộc Tính Style Bằng Javascript by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Lấy Giá Trị Computed Style

Một nhược điểm lớn khi làm việc với inline style là bạn chỉ có thể truy cập được các giá trị được thiết lập trực tiếp trên thuộc tính style của phần tử. Nếu style được định nghĩa trong file CSS riêng, thì giá trị trả về có thể là chuỗi rỗng.

Và để truy xuất được các style đã viết trong file CSS thì chúng ta cần sử dụng phương thức window.getComputedStyle().

Đây là một hàm hữu ích cho phép bạn lấy ra giá trị cuối cùng của các thuộc tính CSS sau khi đã được trình duyệt hiển thị.

Ví dụ:

// Lấy ra computed style của header
const computedStyle = window.getComputedStyle(header);
console.log("Font size sau khi tính toán: ", computedStyle.fontSize); // Ví dụ: "32px"

Nhờ window.getComputedStyle(), bạn có thể biết được kích thước chữ, màu sắc hay bất cứ thuộc tính nào sau khi đã được áp dụng đầy đủ các quy tắc CSS của trang.

CSS Classes Và classList

Mặc dù thao tác trực tiếp với thuộc tính style qua JavaScript có thể thực hiện nhanh chóng nhưng khi dự án trở nên lớn hơn thì việc việc thay đổi style này sẽ gây ảnh hưởng không nhỏ đến tính nhất quán và bảo trì cho trang web.

classList

Để giải quyết những vấn đề trên, JavaScript cung cấp thuộc tính classList cho các phần tử. Nó cho phép bạn thao tác với các class của phần tử theo cách trực quan và đơn giản hơn rất nhiều so với việc sử dụng setAttribute().

Các phương thức phổ biến của classList bao gồm:

add(“tên-class”): Thêm một class vào phần tử.
remove(“tên-class”): Xóa một class khỏi phần tử.
toggle(“tên-class”): Nếu class đã tồn tại thì xóa, nếu chưa tồn tại thì thêm vào.
contains(“tên-class”): Kiểm tra xem phần tử có chứa class nào không.

Ví Dụ Sử Dụng classList Cho Giao Diện Web

Hãy cùng xem một ví dụ trong dự án “Cửa Hàng Cà Phê Việt”. Giả sử bạn muốn thay đổi giao diện của một tiêu đề phụ (h2) khi người dùng click vào để nổi bật thông tin khuyến mãi.

HTML Mẫu

<h2 id="promoTitle">Khuyến Mãi Hôm Nay!</h2>

CSS Mẫu

/* Định nghĩa style cho class "purple" và "border" */
.purple {
  color: purple;
}

.border {
  border: 2px dashed #8b008b;
  padding: 10px;
}

JavaScript

const promoTitle = document.getElementById('promoTitle');

// Ban đầu, promoTitle không có class nào
console.log("Các class ban đầu: ", promoTitle.className); // Kết quả: ""

// Thêm class "purple" để thay đổi màu chữ
promoTitle.classList.add('purple');

// Sau đó, thêm class "border" để thêm viền
promoTitle.classList.add('border');

// Kiểm tra xem promoTitle có chứa class "border" hay không
if (promoTitle.classList.contains('border')) {
  console.log("Phần tử đã có class 'border'.");
}

// Thực hiện toggle để loại bỏ class "purple" nếu đã có, hoặc thêm vào nếu chưa có
promoTitle.addEventListener('click', () => {
  promoTitle.classList.toggle('purple');
});

Qua ví dụ trên, bạn có thể dễ dàng thêm hoặc xóa các class mà không cần lo lắng về việc ghi đè các thuộc tính inline hiện có. Điều này giúp cho việc bảo trì code và thay đổi giao diện trở nên linh hoạt và dễ quản lý hơn.

See the Pen
Sử Dụng classList by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Kết Luận

Qua bài viết này, bạn đã có cái nhìn tổng quan và chi tiết về cách làm việc với các thuộc tính và style trong JavaScript. Mong bài viết này sẽ hữu ích cho bạn trong việc thao tác với các phần tử HTML bằng Javascript. Chúc bạn thành công!