本文介绍如何在JavaScript中动态为HTML元素添加自定义属性。通过document.getElementById获取元素后，使用setAttribute方法指定属性名与值。文中提供了完整的HTML与JS代码示例，展示如何在页面加载时添加属性，并通过attributes对象读取自定义属性的值。
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>