首页 > Web开发 > 详细

自定义HTML标签属性

时间:2015-09-18 15:32:28      阅读:261      评论:0      收藏: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.getElementByIdx("txtInput").value);
             }
            
            function showValue()
            {
                 alert(document.getElementByIdx("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.getElementByIdx("txtInput").attributes["idvalue"].nodeValue取得,该方法在IE中也可使用。所以,同时适用IE和Firefox的代码为:

 

<html>
<head>
    <title>自定义属性</title>
    <script language="javascript">
            function showText()
            {
                 alert(document.getElementByIdx("txtInput").value);
             }
            
            function showValue()
            {
                 alert(document.getElementByIdx("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>

自定义HTML标签属性

原文:http://www.cnblogs.com/appinn/p/4819118.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!