Thuộc tính tùy chỉnh trong JavaScript
Trong HTML, được phép thêm các thuộc tính tùy chỉnh của riêng bạn vào các thẻ. Những thuộc tính như vậy phải bắt đầu bằng data-, sau đó có thể là bất kỳ tên thuộc tính nào mà bạn thấy thuận tiện.
Các thuộc tính tùy chỉnh có thể được sử dụng theo vô số cách khác nhau. Nhiều cách trong số đó chúng ta sẽ tìm hiểu tiếp theo trong hướng dẫn, và bạn còn có thể tự mình phát minh ra nhiều cách nữa sau này.
Việc truy cập vào các thuộc tính này được thực hiện không theo cách thông thường. Bạn không thể chỉ đơn giản truy cập vào thuộc tính cùng tên của phần tử như chúng ta đã làm trước đây, mà cần sử dụng thuộc tính đặc biệt dataset, sau đó thông qua dấu chấm viết tên thuộc tính không bao gồm data-. Ví dụ, nếu thuộc tính của chúng ta gọi là data-test, thì để truy cập nó chúng ta sẽ viết elem.dataset.test, trong đó elem là biến chứa phần tử của chúng ta.
Hãy xem một ví dụ. Giả sử chúng ta có phần tử sau:
<div id="elem" data-num="1000"></div>
Hãy hiển thị giá trị của thuộc tính data-num của nó:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // sẽ hiển thị 1000
Và bây giờ hãy gán một giá trị khác cho thuộc tính này:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Cho đoạn mã sau:
<div id="elem" data-text="str">text</div>
Hãy làm sao để khi click vào div, nội dung của thuộc tính data-text của nó được thêm vào cuối văn bản của nó.
Cho các div, chứa trong thuộc tính data-num số thứ tự của chúng:
<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>
Hãy làm sao để khi click vào bất kỳ div nào, số thứ tự của nó được ghi vào cuối div đó.
Cho một nút bấm. Hãy làm sao để nút bấm này đếm số lần click vào nó, bằng cách ghi chúng vào một thuộc tính tùy chỉnh nào đó. Giả sử khi click vào một nút bấm khác, màn hình sẽ hiển thị số lần click đã thực hiện trên nút đầu tiên.
Cho một ô nhập liệu:
<input id="elem" data-length="5">
Trong ô nhập liệu này, thuộc tính data-length chứa số lượng ký tự cần nhập vào ô. Hãy làm sao để khi mất tiêu điểm, nếu số lượng ký tự đã nhập không khớp với số lượng đã cho, một thông báo về điều này sẽ được hiển thị.
Cho một ô nhập liệu:
<input id="elem" data-min="5" data-max="10">
Trong ô nhập liệu này, các thuộc tính data-min và data-max chứa một phạm vi. Hãy làm sao để khi mất tiêu điểm, nếu số lượng ký tự đã nhập không nằm trong phạm vi này, một thông báo về điều này sẽ được hiển thị.
