自定义html标签属性

最新推荐文章于 2023-11-27 18:59:30 发布

lyq885217

最新推荐文章于 2023-11-27 18:59:30 发布

阅读量95

点赞数

分类专栏： Html 文章标签： HTML Firefox IE

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为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="显示文本内容" οnclick="showText();">
<input type="button" id="btnShowValue" name="btnShowValue" value="显示文本值" οnclick="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="显示文本内容" οnclick="showText();">
<input type="button" id="btnShowValue" name="btnShowValue" value="显示文本值" οnclick="showValue();">
</body>
</html>

lyq885217

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义html标签属性

为HTML元素添加一自定义的属性非常方便，只须将其加到尖括号中即可，与内置属性地位相等。如我们要为TextBox元素添加属性idvalue：只须在原来的控件后面加上：idvalue=”…”,成为: idvalue即可正式成为txtInput的属性，地位与其他属性相等。如以下例子，在IE6中调试通过：自定义...
复制链接

扫一扫

专栏目录