Cách sử dụng Thuộc tính tùy chỉnh trong HTML

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

Bạn có thể gọi thuộc tính tùy chỉnh của mình là gì bạn muốn, tuy nhiên, tên thuộc tính tùy chỉnh phải được đặt trước data- nhãn:

<tag data-custom-attribute-name="value">Content</tag>

Ví dụ:giả sử chúng ta có một nguyên tố thực phẩm được gọi là “Apple” . Khi người dùng nhấp vào nó, chúng tôi muốn hiển thị loại thức ăn, nó nằm trong hộp thoại bật lên.

Để làm điều đó, chúng tôi sẽ tạo một thuộc tính tùy chỉnh có tên là food-type (hãy nhớ data- nhãn) và thêm nó vào <div> phần tử với Apple văn bản bên trong:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</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à bản trình diễn.

Cách mã HTML hoạt động:

Đầu tiên, chúng tôi đã thêm một onclick thuộc tính cho <div> yếu tố. Đây là một thuộc tính sự kiện gắn một trình xử lý sự kiện sẽ lắng nghe ... bạn đoán rồi đấy, nhấp chuột!
Sau đó, chúng tôi chỉ định một giá trị thuộc tính của showDetailsBox(this) vào onclick thuộc tính.
showDetailsBox() là tên của hàm JavaScript được gọi ngay khi bạn nhấp vào phần tử văn bản Apple.
this một phần của (this) là một đối số đề cập đến đối tượng mà nó thuộc về ( this là một chút nâng cao cho người mới bắt đầu, nếu không hiểu cũng không sao).
id là một thuộc tính HTML tích hợp được sử dụng để chỉ định một id duy nhất cho các phần tử HTML. Trong trường hợp này, id duy nhất của chúng tôi là apple .

Cách mã JavaScript hoạt động nằm ngoài phạm vi của hướng dẫn HTML này, vì vậy tôi sẽ cung cấp cho bạn một giải thích đơn giản:

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

function showDetailsBox(food) {
  ...
}

Trên dòng đầu tiên bên trong khối mã, JavaScript chọn bất kỳ phần tử HTML nào có data-food-type tùy chỉnh và gán nó (và giá trị thuộc tính của nó) cho một biến có tên là foodType :

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

Trên dòng thứ hai, chúng tôi chạy alert() tích hợp sẵn (sẽ nhắc hộp thoại bật lên và yêu cầu nó hiển thị giá trị của foodType tất nhiên là fruit :

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

Đừng lo lắng nếu bạn không hoàn toàn hiểu toàn bộ ví dụ về mã ở trên, có rất nhiều điều cần tìm hiểu, đặc biệt là đối với người mới bắt đầu. Với thực hành, nó sẽ có ý nghĩa!

Để biết thêm thông tin sâu rộng về các thuộc tính HTML, tôi khuyên bạn nên tìm hiểu thông qua tài liệu web MDN Tham khảo thuộc tính HTML.

Quan trọng: Không lưu trữ nội dung quan trọng phải hiển thị và có thể truy cập được bên trong các thuộc tính dữ liệu, vì hỗ trợ công nghệ đôi khi không truy cập chúng. Trình thu thập thông tin tìm kiếm có thể cũng không lập chỉ mục các giá trị thuộc tính dữ liệu - vì vậy đừng đặt bất kỳ nội dung SEO quan trọng nào ở đây.