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
Apple
3Content
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à
Apple
4 [nhớ nhãn
Apple
3] và thêm thuộc tính đó vào phần tử
Apple
6 với văn bản
Apple
0 bên trong
Apple
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
1 vào phần tửApple
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ộtApple
- Sau đó, chúng tôi gán một giá trị thuộc tính là
3 cho thuộc tínhApple
1Apple
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 AppleApple
- Phần
6 củaApple
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]Apple
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àApple
9Apple
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
Apple
5 được gọi bởi thuộc tính sự kiện
Apple
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
Apple
5Trê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
Apple
8Trê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]
}
7function 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