Tôi có thể thêm thuộc tính tùy chỉnh vào phần tử HTML không?

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

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ử
  . Đâ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 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à một đố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

function showDetailsBox(food) {
  ...
}

Ở 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

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

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

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

4

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

Ở 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

Tôi có thể thêm các thuộc tính của riêng mình vào các phần tử HTML không?

Làm cách nào để tạo một thuộc tính trong HTML?

Bạn có thể sử dụng các thẻ HTML tùy chỉnh không?

Hoàn toàn an toàn khi sử dụng các thẻ HTML tùy chỉnh trong dự án web của bạn . Với sự hỗ trợ trình duyệt tuyệt vời và tính dễ sử dụng của họ, không gì có thể ngăn cản bạn sử dụng chúng ngay hôm nay. Chỉ cần nhớ tạo các phần tử cấp khối thẻ tùy chỉnh nếu bạn đang sử dụng chúng cho cấu trúc trang.

Những thuộc tính nào có thể được sử dụng với các phần tử HTML?

Chúng bao gồm các thuộc tính tiêu chuẩn cơ bản. chúng bao gồm khóa truy cập, lớp, có thể chỉnh sửa nội dung, menu ngữ cảnh, dữ liệu, thư mục, ẩn, id, lang, kiểu, chỉ mục tab, tiêu đề .