自定义html标签属性

里克尔奇

浏览: 36099 次
性别:
来自: 北京

最近访客更多访客>>

iNarcissuss

weir2009

an_it_eye_2012

loginboot

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html

HTML Firefox IE

为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>

分享到：