HTML thêm thuộc tính tùy chỉnh

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ể đặt tên cho các thuộc tính tùy chỉnh của mình theo ý muốn, tuy nhiên, tên thuộc tính tùy chỉnh phải được đặt trước nhãn

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

3

<tag data-custom-attribute-name="value">Contenttag>

Ví dụ: giả sử chúng ta có một thành phần thực phẩm tên 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 phẩm đó là gì 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à

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

4 (nhớ nhãn

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

3) và thêm thuộc tính đó vào phần tử

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

6 với văn bản

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

0 bên trong

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

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

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

Đây là một bản demo

Cách hoạt động của mã HTML

• Đầu tiên, chúng tôi đã thêm thuộc tính

  <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  1 vào phần tử

  <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  6. Đây là một thuộc tính sự kiện đính kèm một trình lắng nghe sự kiện để lắng nghe. bạn đoán nó, nhấp chuột
• Sau đó, chúng tôi gán một giá trị thuộc tính là

  <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  3 cho thuộc tính

  <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  1

• <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  5 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
• Phần

  <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  6 của

  <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  7 là đối số chỉ đối tượng mà nó thuộc về (phần này hơi nâng cao cho người mới bắt đầu, không hiểu cũng không sao)

• <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  8 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à

  <div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
    Apple
  div>

  9

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

Khi hàm

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

5 được gọi bởi thuộc tính sự kiện

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

1, nó sẽ thực thi khối mã của nó nội dung

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

2

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

5

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ó thuộc tính tùy chỉnh

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

3 và gán nó (và giá trị thuộc tính của nó) cho một biến có tên là

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

4

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
div>

8

Trên dòng thứ hai, chúng tôi chạy phương thức

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

5 tích hợp sẵn (nhắc hộp thoại bật lên và yêu cầu nó hiển thị giá trị của

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

4, tất nhiên là,

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

7

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ộ mã ví dụ ở trên, có rất nhiều điều cần 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 chi tiết về các thuộc tính HTML, tôi khuyên bạn nên tìm hiểu 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 có thể nhìn thấy và truy cập được bên trong các thuộc tính dữ liệu vì các công nghệ hỗ trợ đôi khi không truy cập được chúng. Trình thu thập tìm kiếm cũng có thể 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

Làm cách nào để thêm thuộc tính dữ liệu tùy chỉnh trong HTML?

Tôi có thể sử dụng các thuộc tính HTML tùy chỉnh không?

Thêm thuộc tính tùy chỉnh là gì?

Bạn có thể thêm bất kỳ thuộc tính nào vào HTML không?