自定义HTML标签属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义HTML标签属性相关的知识，希望对你有一定的参考价值。
为html元素添加一自定义的属性非常方便，只须将其加到尖括号中即可，与内置属性地位相等。
如我们要为TextBox元素添加属性idvalue：
只须在原来的控件后面加上：idvalue=”…”,成为:
idvalue即可正式成为txtInput的属性，地位与其他属性相等。
如以下例子，在IE6中调试通过：
<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的代码为：
<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>
这时效果就出现了，页面中所有列表字符被截短，当鼠标碰上时，显示其完整标题；
以上是关于自定义HTML标签属性的主要内容，如果未能解决你的问题，请参考以下文章