setAttribute和getAttribute配合使用 - 问答

示例代码如下：

<!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"属性值，并弹出提示框显示获取到的属性值。

0 赞

0 踩