自定义HTML标签属性

转载 2016年05月31日 09:49:08
 为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>

 

 

idvalueFirefox中却不能通过,主要是因为Firefox控制严格,所以这些自定义属性不能认识。经过调试,只能用document.getElementByIdx("txtInput").attributes["idvalue"].nodeValue取得,该方法在IE中也可使用。所以,同时适用IEFirefox的代码为:

 

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

 

以下转自csdn   

 

    就是给标签写一个它并不存在属性;如
<div TextLength="20"></div>
在HTML中,div标签并没有TextLength属性,是我自已经加的;

假如,页面中有这样一段HTML代码:
<div>新闻列表
         <ul>
           <li> [图]不按规定线路运营阻挠执法人员执法 公交车擅改运营线路被查处 [2007-7-31] </li>
           <li> 五金厂已搬迁 眼镜厂仍扰民 [2007-7-31] </li>
           <li> [图]“2007香港购物节”正在举行——市民赴港疯狂“血拼” [2007-7-27] </li>
           <li>[图]花园后面的山脚边,存在大量的乱搭建,街道执法队展... [2007-7-27] </li>
         </ul>
</div>

我要截取这些字符,当然很容易;用getElementsByTabName取出li标签列表,用个for循环逐一处理一个就可以了;

但是,字符截多长呢,自然要设变量,这个变量设在哪呢,如果写在javascript中,这个变量离HTML代码太远了(一个在头部head,一个在body),开发人员不方便操作,因为在页面中,它能会有很多这样的新闻列表或其它列表;于是我想到了给li的父级标签ul,加自定义属性,当然,如果是ol也是可以的,只要是li的父级就行;如:

<div>新闻列表
         <ul TextLength="15">
           <li> [图]不按规定线路运营阻挠执法人员执法 公交车擅改运营线路被查处 [2007-7-31] </li>
           <li> 五金厂已搬迁 眼镜厂仍扰民 [2007-7-31] </li>
           <li> [图]“2007香港购物节”正在举行——市民赴港疯狂“血拼” [2007-7-27] </li>
           <li>[图]花园后面的山脚边,存在大量的乱搭建,街道执法队展... [2007-7-27] </li>
         </ul>
</div>

与前面相比,ul多了TextLength属性,就是我要截取的字符串长度值;然后,我写了一个函数,来读取这个属性,并将该区域的li中字符截短。函数如下:

<script language="javascript" type="text/javascript">
function lineShow()
{
    var list = document.getElementsByTagName_r("li");  
    for(var i = 0; i < list.length; i ++ )
    {
     // 获取自定义参数,为字符长度
var textlength = Number(list[i].parentNode.getAttribute("TextLength"));
      list[i].setAttribute("title", list[i].innerHTML);
      list[i].innerHTML = subString(list[i].innerHTML, textlength);
    }
}
function subString(str, len)
{
    len = len == null || isNaN(len) ? 0 : len;
    if(len < 1 || str.length <= len)return str;
    return str.substr(0, len) + "…";
}
</script>

上面代码中的语句,都是较常用的,不用过多解释了。

最后,在页面载入完毕时,调用该函数就行了。调用函数的代码如下:
<script language="javascript" type="text/javascript" defer="true">
lineShow();
</script>

这时效果就出现了,页面中所有列表字符被截短,当鼠标碰上时,显示其完整标题;

其实上面的javascript并没有什么特殊的,很简单,唯一不同的是,我利用自定义属性,让开发人员,在使用这个效果时,更方便了。

自定义HTML标签属性

====================================================== 注:本文源代码点此下载 =============================...

js获得当前系统时间(html标签自定义属性)

无标题文档 function getCurDate(){ var d = new Date(); var week; switch (d.getDay()){ ...

HTML5基础加强css样式篇(标签自定义属性)(八)

1.自定义属性 尚硅谷HTML5 初级阶段 .box { /*Add your CSS*/ } ...

php整理html 自定义允许使用的标签和属性属性

发布文章帖子等一般都是会页面html做过滤、转ubb码等,但是在多层复杂嵌套的时候会遇到很多问题,如果你不想用户使用html完全可以使用strip_tags过滤,如果需要html过滤会用一些手段如正则...

HTML:自定义标签属性

  • 2012年01月29日 15:15
  • 35KB
  • 下载

HTML自定义标签与标签自定义属性

大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当。 自定义HTML标签 在firefox、chrome这种现代浏览器里,自定义标...
  • CsethCRM
  • CsethCRM
  • 2014年01月16日 11:14
  • 16602

HTML自定义标签与标签自定义属性

大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当。 自定义HTML标签 在firefox、chrome这种现代浏览器里,自定义标...

ExtTag,获取HTML自定义属性

  • 2010年10月15日 17:08
  • 3KB
  • 下载

Java解析Html自定义标签的属性

需要将html文档用textview读取出来
  • tx360v5
  • tx360v5
  • 2014年06月22日 00:55
  • 1217
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义HTML标签属性
举报原因:
原因补充:

(最多只允许输入30个字)