為HTML元素添加一自訂的屬性非常方便,只須將其加到角括弧中即可,與內建屬性地位相等。
如我們要為TextBox元素添加屬性idvalue:
<input type="text" id="txtInput" name="txtInput" value="自訂文本">
只須在原來的控制項後面加上:idvalue=”…”,成為:
<input type="text" id="txtInput" name="txtInput" value="自訂文本" idvalue="自訂值">
idvalue即可正式成為txtInput的屬性,地位與其他屬性相等。
如以下例子,在IE6中調試通過:
<html>
<head>
<title>自訂屬性</title>
<script language="javascript">
function showText()
{
alert(document.getElementById("txtInput").value);
}
function showValue()
{
alert(document.getElementById("txtInput").idvalue);
}
</script>
</head>
<body>
<input type="text" id="txtInput" name="txtInput" value="自訂文本" idvalue="自訂值">
<input type="button" id="btnShowText" name="btnShowText" value="顯示常值內容" onclick="showText();">
<input type="button" id="btnShowValue" name="btnShowValue" value="顯示文本值" onclick="showValue();">
</body>
</html>
但idvalue在Firefox中卻不能通過,主要是因為Firefox控制嚴格,所以這些自訂屬性不能認識。經過調試,只能用document.getElementById("txtInput").attributes["idvalue"].nodeValue取得,該方法在IE中也可使用。所以,同時適用IE和Firefox的代碼為:
<html>
<head>
<title>自訂屬性</title>
<script language="javascript">
function showText()
{
alert(document.getElementById("txtInput").value);
}
function showValue()
{
alert(document.getElementById("txtInput").attributes["idvalue"].nodeValue);
}
</script>
</head>
<body>
<input type="text" id="txtInput" name="txtInput" value="自訂文本" idvalue="自訂值">
<input type="button" id="btnShowText" name="btnShowText" value="顯示常值內容" onclick="showText();">
<input type="button" id="btnShowValue" name="btnShowValue" value="顯示文本值" onclick="showValue();">
</body>
</html>
原始碼: http://files.cnblogs.com/redleaf1995/testcustom.rar