setAttribute和getAttribute配合使用

   2024-10-08 6610
核心提示:示例代码如下:!DOCTYPE htmlhtmlheadtitlesetAttribute和getAttribute示例/title/headbodyh2设置和获取属性值示例/h2input type

示例代码如下:

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

 
举报打赏
 
更多>同类维修大全
推荐图文
推荐维修大全
点击排行

网站首页  |  关于我们  |  联系方式网站留言    |  赣ICP备2021007278号