Đổi màu chữ của toàn bộ liên kết sang màu đỏ bằng JavaScript

Javascript căn bản | 16/06/2025 by Học Javascript

Trong quá trình phát triển giao diện web, khả năng tương tác và điều chỉnh phong cách hiển thị của các phần tử HTML bằng JavaScript là một kỹ năng quan trọng. Một trong những ứng dụng phổ biến là thay đổi kiểu dáng (style) của các liên kết để phù hợp với yêu cầu thiết kế hoặc tạo điểm nhấn cho người dùng. Trong bài tập này, chúng ta sẽ tìm hiểu cách sử dụng JavaScript để truy xuất và thay đổi màu chữ của tất cả các thẻ liên kết (<a>) trên trang sang màu đỏ.

Qua đó, người học sẽ được rèn luyện kỹ năng thao tác với DOM, sử dụng vòng lặp và xử lý thuộc tính style của phần tử HTML. Đây là một bước khởi đầu đơn giản nhưng hiệu quả để hiểu rõ hơn về cách JavaScript có thể kiểm soát giao diện người dùng một cách linh hoạt.

Yêu cầu bài tập đổi màu chữ của toàn bộ liên kết sang màu đỏ bằng JavaScript

Bài tập này yêu cầu học sinh thực hiện các thao tác sau trên một trang web có chứa nhiều thẻ liên kết (<a>) bằng cách sử dụng JavaScript. Mục tiêu là thay đổi màu chữ của tất cả các liên kết thành màu đỏ. Dưới đây là các yêu cầu chi tiết:

Truy xuất tất cả các thẻ <a> trên trang web bằng JavaScript:

Sử dụng một trong hai phương thức:

document.getElementsByTagName("a") – trả về một HTMLCollection gồm tất cả các thẻ <a>.
Hoặc document.querySelectorAll("a") – trả về một NodeList các thẻ <a>.

Kết quả là bạn sẽ có một danh sách các liên kết hiện có trên trang để xử lý tiếp.

Thay đổi màu chữ của các thẻ <a> sang màu đỏ:

Có hai cách để thực hiện:

Gán trực tiếp thuộc tính style.color:

Duyệt qua danh sách thẻ <a> và gán element.style.color = "red" cho mỗi phần tử.
Cách này không cần CSS sẵn có, phù hợp để học kỹ năng thao tác trực tiếp với thuộc tính style trong DOM.

const links = document.querySelectorAll("a");
links.forEach(link => {
  link.style.color = "red";
});

Thêm class CSS có sẵn từ JavaScript:

Tạo một class CSS tên là .red-link với thuộc tính color: red;.
Sau đó dùng element.classList.add("red-link") để áp dụng class này cho các thẻ <a>.

<style>
  .red-link {
    color: red;
  }
</style>

const links = document.querySelectorAll("a");
links.forEach(link => {
  link.classList.add("red-link");
});

Kiểm tra hiệu ứng sau khi thay đổi:

Người học cần xác minh kết quả bằng cách:

Quan sát trên trình duyệt: Tất cả liên kết sẽ hiển thị với màu đỏ.
Hoặc kiểm tra trong Developer Tools (F12 → tab Elements → xem thuộc tính style/class đã được áp dụng).

Có thể sử dụng console.log() để kiểm tra danh sách đã được xử lý nếu cần:

console.log("Đã xử lý " + links.length + " liên kết.");

Yêu cầu bổ sung (tùy chọn):

Kiểm tra xem có thẻ <a> nào tồn tại trước khi thực hiện.
Có thể thêm nút HTML để thực hiện thao tác thay đổi khi người dùng nhấn vào (ứng dụng thêm sự kiện).

Các bước hướng dẫn đổi màu chữ của toàn bộ liên kết sang màu đỏ bằng JavaScript

Để thực hiện bài tập này một cách hiệu quả, bạn có thể làm theo các bước hướng dẫn chi tiết dưới đây:

Tạo file HTML cơ bản

Bắt đầu bằng cách tạo một file HTML có chứa một số thẻ <a> để thử nghiệm.
Bạn có thể thêm nhiều liên kết với nội dung và đường dẫn khác nhau để dễ quan sát sự thay đổi.

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Bài tập đổi màu liên kết</title>
</head>
<body>

  <h2>Danh sách liên kết</h2>
  <a href="https://google.com">Google</a><br>
  <a href="https://facebook.com">Facebook</a><br>
  <a href="https://openai.com">OpenAI</a><br>

  <script src="script.js"></script>
</body>
</html>

Lấy danh sách các thẻ <a>

Trong file JavaScript (script.js), sử dụng document.querySelectorAll("a") để lấy tất cả các thẻ <a> trên trang.

Ví dụ:

const links = document.querySelectorAll("a");

Lúc này links là một NodeList chứa tất cả các thẻ <a> có trong trang.

Thay đổi màu chữ bằng JavaScript

Duyệt qua từng phần tử trong NodeList links và thay đổi thuộc tính style.color sang màu đỏ.

Ví dụ:

links.forEach(link => {
  link.style.color = "red";
});

Cách làm này giúp bạn áp dụng nhanh hiệu ứng lên toàn bộ các liên kết mà không cần chỉnh sửa thủ công từng thẻ.

Kiểm tra kết quả

Quan sát giao diện: Sau khi mở trang HTML trong trình duyệt, bạn sẽ thấy tất cả các liên kết đã được đổi sang màu đỏ.

Kiểm tra trong Developer Tools:

Nhấn F12 → Chuyển sang tab Elements → chọn một thẻ <a> bất kỳ.
Kiểm tra phần style để xem thuộc tính color: red; đã được áp dụng.

In số lượng liên kết xử lý (nếu muốn):

console.log(`Đã đổi màu cho ${links.length} liên kết.`);

Gợi ý cách triển khai đổi màu chữ toàn bộ liên kết sang đỏ bằng JavaScript

Tách phần xử lý ra thành một hàm changeLinkColorToRed()

Việc đóng gói logic vào một hàm giúp dễ tái sử dụng, dễ mở rộng và đọc mã hơn.

function changeLinkColorToRed() {
  const links = document.querySelectorAll("a");
  links.forEach(link => {
    link.style.color = "red";
  });
}

Gọi hàm sau khi tài liệu được tải đầy đủ

Để đảm bảo JavaScript chạy sau khi tất cả các phần tử <a> đã có mặt trên DOM, bạn nên sử dụng sự kiện DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function () {
  changeLinkColorToRed();
});

Sử dụng classList.add() để thêm lớp CSS thay vì chỉnh trực tiếp style

Cách này giúp bạn quản lý kiểu dáng dễ hơn và có thể tái sử dụng CSS:

Trong CSS:

.link-red {
  color: red;
}

Trong JavaScript:

function changeLinkColorToRed() {
  const links = document.querySelectorAll("a");
  links.forEach(link => {
    link.classList.add("link-red");
  });
}

Mở rộng đổi màu chữ toàn bộ liên kết sang đỏ bằng JavaScript

Chỉ đổi màu các liên kết bên ngoài (có href bắt đầu bằng "http")

Có thể lọc điều kiện trước khi đổi màu:

function changeExternalLinkColorToRed() {
  const links = document.querySelectorAll("a");
  links.forEach(link => {
    if (link.href.startsWith("http")) {
      link.style.color = "red";
    }
  });
}

Đổi màu khi di chuột vào liên kết (mouseover)

Gắn sự kiện chuột vào từng thẻ <a> để đổi màu khi rê chuột:

function addHoverEffectToLinks() {
  const links = document.querySelectorAll("a");
  links.forEach(link => {
    link.addEventListener("mouseover", () => {
      link.style.color = "red";
    });
    link.addEventListener("mouseout", () => {
      link.style.color = ""; // quay về màu mặc định
    });
  });
}

Đổi màu kết hợp với hiệu ứng chuyển động mượt (CSS transition)

Trong CSS:

a {
  transition: color 0.3s ease;
}

Khi bạn thay đổi màu trong JavaScript (dù là qua class hay style.color), liên kết sẽ đổi màu mượt mà hơn nhờ hiệu ứng transition.

Kết bài

Qua bài tập này, bạn đã thực hành cách truy cập và thao tác với các phần tử <a> trên trang web bằng JavaScript. Cụ thể, bạn đã học cách thay đổi thuộc tính kiểu dáng như màu chữ thông qua thuộc tính style hoặc bằng cách thêm class CSS. Bên cạnh đó, việc áp dụng các mở rộng như chỉ đổi màu các liên kết ngoài, thêm hiệu ứng khi di chuột hay kết hợp với CSS transition giúp nâng cao trải nghiệm người dùng và thể hiện sự linh hoạt khi làm việc với DOM.

Kỹ năng này sẽ rất hữu ích trong việc tùy chỉnh giao diện web, xử lý tương tác người dùng và tạo ra các hiệu ứng động trong các dự án JavaScript thực tế.