自定义HTML标签属性

我们做的网站项目，因为时间很急，所以为了快速实现效果，大量采用服务器控件，并将很多处理都放在了服务器端，毕竟有VS.net开发环境，写C#代码是很快的。但因为数据处理集中在了服务器端，所以服务器压力较大；

举个简单例子，在新闻列表的地方，当新闻的标题过长时，需要截取，并在原字符后面加上省略号，然后当鼠标碰上去时，显示完整标题；

像这个效果，团队中，有些同事是用javascript中实现，而大多数是用C#实现的；可以想像，新闻页面上有多少条列表，新闻页面会同时有多少人访问，就这一个简单的运算，服务器要运算多少次；完全可以把它移到客户端执行，就是用javascript实现该效果；因为运算分拆到单个的客户机上，所以用户访问时根本不会感觉到不同（现在的PC机运算速度可是相当快的），从而避免了运算集中在服务器执行的恶果。

由于团队成员中各自的javascript水平相差甚大，不能强制要求所有人去改变，于是我就想用一种简单的方法来处理这个简单的问题；想做自定义html标签来处理；

原意是这样的。

在HTML的标签中，如div,p,a,span中，后面会有一些属性，如
<div style="">
标签a中<a href='' alt=''/>

在上面效果中，style,href,alt都是标签属性，这些是于XML类似的，当然，现在普遍采用的HTML是XHTML，它与XML是兼容的。我们可以用DOM来访问这些标签属性；

通过修改这些方法，我们可以改变标签的样式，就是修改style属性，也可以改变超链接的链接地址，就是href属性，等等；工作中经常用的，并不稀奇；

但是并没有给HTML标签写过自定义的属性，就是给标签写一个它并不存在属性；如
<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("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并没有什么特殊的，很简单，唯一不同的是，我利用自定义属性，让开发人员，在使用这个效果时，更方便了。