自定义HTML标签属性

======================================================

注：本文源代码点此下载

======================================================

为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>
以下转自csdn
就是给标签写一个它并不存在属性;如
在html中,div标签并没有textlength属性,是我自已经加的;
假如,页面中有这样一段html代码:
新闻列表
[图]不按规定线路运营阻挠执法人员执法 公交车擅改运营线路被查处 [2007-7-31]
五金厂已搬迁 眼镜厂仍扰民 [2007-7-31]
[图]“2007香港购物节”正在举行——市民赴港疯狂“血拼” [2007-7-27]
[图]花园后面的山脚边,存在大量的乱搭建,街道执法队展... [2007-7-27]
我要截取这些字符,当然很容易;用getelementsbytabname取出li标签列表,用个for循环逐一处理一个就可以了;
但是,字符截多长呢,自然要设变量,这个变量设在哪呢,如果写在javascript中,这个变量离html代码太远了(一个在头部head,一个在body),开发人员不方便操作,因为在页面中,它能会有很多这样的新闻列表或其它列表;于是我想到了给li的父级标签ul,加自定义属性,当然,如果是ol也是可以的,只要是li的父级就行;如:
新闻列表
[图]不按规定线路运营阻挠执法人员执法 公交车擅改运营线路被查处 [2007-7-31]
五金厂已搬迁 眼镜厂仍扰民 [2007-7-31]
[图]“2007香港购物节”正在举行——市民赴港疯狂“血拼” [2007-7-27]
[图]花园后面的山脚边,存在大量的乱搭建,街道执法队展... [2007-7-27]
与前面相比,ul多了textlength属性,就是我要截取的字符串长度值;然后,我写了一个函数,来读取这个属性,并将该区域的li中字符截短。函数如下:
上面代码中的语句,都是较常用的,不用过多解释了。
最后,在页面载入完毕时,调用该函数就行了。调用函数的代码如下:
这时效果就出现了,页面中所有列表字符被截短,当鼠标碰上时,显示其完整标题;
其实上面的javascript并没有什么特殊的,很简单,唯一不同的是,我利用自定义属性,让开发人员,在使用这个效果时,更方便了。

======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/