示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>setAttribute和getAttribute示例</title>
</head>
<body>
<h2>設置和獲取屬性值示例</h2>
<input type="text" id="inputField">
<button onclick="setValue()">設置屬性值</button>
<button onclick="getValue()">獲取屬性值</button>
<script>
function setValue() {
var inputField = document.getElementById("inputField");
inputField.setAttribute("data-value", "Hello, World!");
alert("屬性值已設置為: " + inputField.getAttribute("data-value"));
}
function getValue() {
var inputField = document.getElementById("inputField");
var value = inputField.getAttribute("data-value");
alert("獲取到的屬性值為: " + value);
}
</script>
</body>
</html>
這段代碼演示了如何使用setAttribute和getAttribute方法來設置和獲取元素的自定義屬性值。當點擊"設置屬性值"按鈕時，會將input元素的"data-value"屬性設置為"Hello, World!"，并彈出提示框顯示設置的屬性值。當點擊"獲取屬性值"按鈕時，會獲取input元素的"data-value"屬性值，并彈出提示框顯示獲取到的屬性值。
