Thuộc tính tùy chỉnh là các thuộc tính không phải là một phần của thuộc tính HTML5 tiêu chuẩn nhưng được tạo rõ ràng. Chúng cho phép chúng tôi thêm thông tin của riêng mình vào các thẻ HTML. Chúng không cụ thể và có thể được sử dụng với tất cả các phần tử HTML. Thông tin bổ sung được lưu trữ thông qua các thuộc tính tùy chỉnh là dữ liệu không cần có bất kỳ ý nghĩa xác định nào. Những dữ liệu này là riêng tư đối với trang hoặc ứng dụng. Thuộc tính tùy chỉnh còn được gọi là thuộc tính dữ liệu
Bất kỳ thuộc tính nào có tên bắt đầu bằng dữ liệu- là thuộc tính tùy chỉnh. Các thuộc tính data-* cho phép chúng tôi nhúng các thuộc tính tùy chỉnh trên tất cả các phần tử HTML. Chúng hoàn toàn bị bỏ qua bởi tác nhân người dùng. Dữ liệu được lưu trữ có thể được sử dụng trong JavaScript của trang. Chúng tôi cũng có thể sử dụng các thuộc tính dữ liệu này để tạo kiểu cho các phần tử của mình
cú pháp
Hai phần của thuộc tính tùy chỉnh
- Tên thuộc tính – Tên thuộc tính phải dài ít nhất một ký tự sau tiền tố “data-“. Nó không được chứa bất kỳ chữ cái viết hoa nào
- Giá trị thuộc tính – Giá trị được lưu trữ có thể là bất kỳ chuỗi nào
ví dụ 1. Trong ví dụ này, chúng ta sẽ đọc giá trị của các thuộc tính này bằng JavaScript khá đơn giản. Trong thực tế, có nhiều hơn một cách để làm như vậy. Một cách đơn giản hơn là sử dụng getAttribute[] và setAttribute[]. getAttribute[] có thể được sử dụng để lấy dữ liệu được lưu trữ từ thuộc tính. Nó sẽ trả về null hoặc một chuỗi rỗng nếu thuộc tính được hỏi không tồn tại. setAttribute[] có thể được sử dụng để sửa đổi giá trị của bất kỳ thuộc tính hiện có nào hoặc để thêm một thuộc tính mới.
tên tệp. mục lục. html
HTML
4head>
______20html4>2>
html6>5
html04html2>
html0
html0______2html2 html3html4html5
html6html7html4head0 >0html4head3>
html6head6
html04html2>
html0
html0______2html2 html3html4html5
html6html7____34 1 >0html4 4>
html6 7
html04html2>
html0
html0______2html2 html3html4html5
html6html7html402 >0html405>
html608
html04html2>
____14____28>
________số 8
______220 21html4232420>
48____4
4html>
custom_attributes. js. Tệp JavaScript này sẽ xử lý các thuộc tính tùy chỉnh sẽ được truy cập bằng getAttribute[]. Chúng tôi sẽ sử dụng điều này để tạo cảnh báo bất cứ khi nào một mục danh sách được nhấp vào. Mã JavaScript trông như thế này
Javascript
33 34
____136 373839
______14142 4344 454639
48
đầu ra
Màn hình đầu ra
ví dụ 2. Trong ví dụ này, chúng ta sẽ thấy một cách khác để truy cập các thuộc tính dữ liệu là sử dụng thuộc tính dataset. Thuộc tính này trả về một đối tượng DOMStringMap với một mục cho mỗi thuộc tính dữ liệu tùy chỉnh. Khóa DOMStringMap là một dạng đã chuyển đổi của thuộc tính dữ liệu tùy chỉnh. Tiền tố “data-” bị xóa khỏi tên thuộc tính. Bất kỳ dấu gạch nối nào trong tên cũng bị xóa. Bằng cách này, chúng tôi nhận được một tên camelCase. Sau đó, các thuộc tính có thể được truy cập bằng cách sử dụng tên camelCase được lưu trữ trong đối tượng dưới dạng phần tử giống như khóa. tập dữ liệu. tên khóa hoặc phần tử. tập dữ liệu [tên khóa]. Chúng tôi sẽ lấy danh sách các loại thực phẩm. Các thuộc tính tùy chỉnh sẽ chứa loại thực phẩm. Thuộc tính title sẽ kích hoạt JavaScript khi một mục được nhấp vào
HTML
4head>
______2
html690
html04html2>
html0
html0______2html2 html3html483
html685html4
html6
html0
html0______2html2 html3html483
html685html4
html6
html0
html0______2html2 html3html483
html685html4
html6
____14____28>
________số 8
______220 21html4232420>
48____4
4html>
custom_attributes. js. Bất cứ khi nào một mục được nhấp vào, đoạn mã này sẽ được kích hoạt. Ở đây chúng tôi sẽ cảnh báo loại thực phẩm được lưu trữ trong thuộc tính tùy chỉnh bằng thuộc tính tập dữ liệu. Đoạn mã trông như thế này
Javascript
33