为HTML元素添加一自定义的属性非常方便,只须将其加到尖括号中即可,与内置属性地位相等。
如我们要为TextBox元素添加属性idvalue:
<
input
type
="text"
id
="txtInput"
name
="txtInput"
value
="自定义文本"
>
<
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 >
< 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 >
< 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://www.cnblogs.com/Files/redleaf1995/testcustom.rar