自定義屬性值是HTML5中的一項新功能，可以爲HTML元素添加自定義屬性，以便在JavaScript中進行操作。通過添加自定義屬性，我們可以爲元素添加額外的信息，這些信息可以被JavaScript代碼訪問和操作，從而實現更加靈活的交互效果。
一、定義自定義屬性值
在HTML元素中，我們可以通過data-屬性來定義自定義屬性值。例如，我們可以爲一個按鈕添加一個data-id屬性，其值爲1，如下所示：
點擊
二、使用自定義屬性值
在JavaScript中，我們可以通過getAttribute()方法來獲取元素的自定義屬性值。例如，我們可以獲取上述按鈕的data-id屬性值，如下所示：
var button = document.querySelector('button');
var id = button.getAttribute('data-id');
console.log(id); // 輸出1
三、操作自定義屬性值
我們可以通過JavaScript代碼來修改元素的自定義屬性值。例如，我們可以將上述按鈕的data-id屬性值修改爲2，如下所示：
var button = document.querySelector('button');
button.setAttribute('data-id', '2');
四、使用自定義屬性值實現交互效果
通過自定義屬性值，我們可以實現更加靈活的交互效果。例如，我們可以爲一個表格的每一行添加一個data-id屬性，其值爲該行數據的id，然後在點擊某一行時，通過JavaScript代碼獲取該行的id，然後進行相關操作，如下所示：
HTML代碼：
1
John
Doe
2
Jane
Doe
JavaScript代碼：
var rows = document.querySelectorAll('tr');
for (var i = 0; i < rows.length; i++) {
rows[i].addEventListener('click', function() {
var id = this.getAttribute('data-id');
console.log(id); // 輸出該行數據的id
// 在這裏進行相關操作
});
}
通過上述代碼，我們可以在點擊表格的某一行時，獲取該行數據的id，並進行相關操作。
總結
自定義屬性值是HTML5中的一項新功能，可以爲HTML元素添加自定義屬性，以便在JavaScript中進行操作。通過添加自定義屬性，我們可以爲元素添加額外的信息，這些信息可以被JavaScript代碼訪問和操作，從而實現更加靈活的交互效果。
