💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Thuộc tính data
📌
Kết luận
Dùng thuộc tính data-* để nhúng dữ liệu tùy chỉnh vào HTML
📝 Mã thực tế tại đây
<div data-id="123" data-name="test">Phần tử</div>Cách lấy dữ liệu từ JavaScript
📝 Mã thực tế tại đây
const el = document.querySelector('[data-id]');
console.log(el.dataset.id); // "123"
console.log(el.dataset.name); // "test"data- sẽ trở thành tên thuộc tính trong đối tượng dataset. Ví dụ data-user-id sẽ chuyển thành dataset.userId (dạng camelCase).
Trường hợp sử dụng
| Tình huống | Ví dụ |
|---|---|
| Gán ID cho từng mục trong danh sách | Nhận diện mục nào được nhấp vào |
| Lưu dữ liệu hiển thị cho Modal | Lưu tiêu đề trong data-title |
| Truyền cấu hình cho JavaScript | Chỉ định tên theme trong data-theme |
Tổng kết
- Nhúng dữ liệu tùy chỉnh bằng thuộc tínhdata-*
- Truy cập từ JS thông qua element.dataset
- Tên có dấu gạch ngang sẽ được chuyển sang camelCase
Hãy thử trong phần bài tập
Hãy tạo một thẻ div có thuộc tính data-id và data-name nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy thêm thuộc tính data-id="123" và data-name="test" vào thẻ div.
Gợi ý khi gặp khó khăn
Thuộc tính bắt đầu bằng data- dùng để lưu trữ dữ liệu tùy chỉnh.