JavaScript动态添加HTML元素自定义属性详解

JavaScript动态添加自定义属性

此前曾提及，为HTML元素添加自定义属性通常需在HTML标签中手动编写。实际上，利用JavaScript也可以实现动态添加，例如针对一个文本框元素进行操作。

<input type="text" id="txtInput" name="txtInput" value="自定义文本">

若需为该元素增加一个名为idvalue的自定义属性，并将其值设为“自定义值”，可在JavaScript脚本中执行以下操作：

var txt = document.getElementById("txtInput");
txt.setAttribute("idvalue","自定义值");

在setAttribute方法中，第一个参数用于指定自定义属性的名称，第二个参数则用于设定该属性的初始值。

完整的代码示例如下：

<html>
<head>
<title>用javascript添加控件自定义属性</title>
<script language="javascript">
function addCustomAttribute()
        {
var txt = document.getElementById("txtInput");
txt.setAttribute("idvalue","自定义值");
        }
function showIdValue()
        {
var txt = document.getElementById("txtInput");
alert(txt.attributes["idvalue"].nodeValue);
        }
</script>
</head>
<body onload="addCustomAttribute();">
<input type="text" id="txtInput" name="txtInput" value="自定义文本">
<input type="button" value="显示idValue" onclick="showIdValue();">
</body>
</html>