Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Cách sử dụng Custom Attributes (thuộc tính tùy chỉnh) trong HTML

Trong HTML bạn có thể tạo thuộc tính tùy chỉnh (custom attributes). Sau đó dùng CSS để định dạng, hoặc JavaScript để kiểm soát hành vi của các thuộc tính đó.

Bạn có thể đặt tên tùy ý, tuy nhiên tên thuộc tính tùy chỉnh phải có tiền tố data-:

<tag data-custom-attribute-name="value">Nội dung</tag>

Ví dụ, giả sử chúng ta có phần tử thức ăn gọi là "Táo". Khi người dùng nhấp vào, chúng ta muốn hiển thị loại thức ăn trong hộp thoại popup.

Để làm điều đó, tạo thuộc tính tùy chỉnh gọi là food-type (nhớ tiền tố data-) và thêm vào phần tử <div> với text Táo bên trong:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit"> Táo </div>

Và JavaScript làm cho tính năng hoạt động:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

Đây là demo.

Cách code HTML hoạt động:

  • Thứ nhất, thêm thuộc tính onclick vào phần tử <div>. Đây là thuộc tính sự kiện gắn trình lắng nghe sự kiện click!
  • Sau đó gán giá trị showDetailsBox(this) cho thuộc tính onclick.
  • showDetailsBox() là tên hàm JavaScript được gọi ngay khi nhấp vào phần tử text Táo.
  • Phần this trong (this) là tham số tham chiếu đến đối tượng nó thuộc về (this hơi nâng cao cho người mới, không sao nếu chưa hiểu).
  • id là thuộc tính HTML tích hợp dùng để chỉ định ID duy nhất cho phần tử HTML. Ở đây ID duy nhất là apple.

Cách code JavaScript hoạt động nằm ngoài phạm vi hướng dẫn HTML này, tôi sẽ giải thích đơn giản:

Khi hàm showDetailsBox() được gọi bởi thuộc tính sự kiện onclick, nó thực thi khối code { ... }:

function showDetailsBox(food) { ... }

Dòng đầu trong khối code, JavaScript chọn phần tử HTML với thuộc tính tùy chỉnh data-food-type, gán nó (và giá trị thuộc tính) vào biến foodType:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") ... }

Dòng thứ hai chạy phương thức alert() tích hợp (hiện hộp thoại popup và bảo nó hiển thị giá trị foodType là fruit:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

Đừng lo nếu chưa hiểu hoàn toàn ví dụ code trên, có nhiều thứ cần tiêu hóa, đặc biệt cho người mới. Với thực hành, sẽ hiểu!

Về thông tin mở rộng về thuộc tính HTML, khuyên đọc tài liệu MDN web docs HTML attribute reference.

Quan trọng: Đừng lưu nội dung quan trọng cần hiển thị và truy cập trong data attributes, vì công nghệ hỗ trợ đôi khi không truy cập được. Crawler tìm kiếm có thể không index giá trị data attributes — đừng đặt nội dung SEO quan trọng ở đây.