为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

就是给标签写一个它并不存在属性；如
<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标签属性的更多相关文章

  1. js 自定义html标签属性

    <input type="text" id="txtBox" displayName="123456" /> 获取自定义属性值: ...

  2. JSP自定义简单标签入门之带有属性

    上面写的那个简单标签来控制页面中标签内容的重复次数是固定的,这就是权限"写死了",这是非常不好的行为,因为其灵活性太差.所以下面就介绍一种使用属性来控制标签内容输出次数的方法. 准 ...

  3. 如何自定义JSTL标签与SpringMVC 标签的属性中套JSTL标签报错的解决方法

    如何自定义JSTL标签 1.创建一个类,从SimpleTagSupport继承 A) 通过继承可以获得当前JSP页面上的对象,如JspContext I) 实际上可以强转为PageContext II ...

  4. jsp2自定义标签+属性

    前面说过jsp2自定义标签如果要加入属性需要设置属性的getter和setter方法.代码如下: public class GetParam extends SimpleTagSupport { pr ...

  5. 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素

    有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编 ...

  6. 自定义JSP标签库及Properties使用

    自定义JSP标签库及Properties使用 自定义JSP标签 自定义JSP标签技术是在JSP 1.1版本中才出现的,它支持用户在JSP文件中自定义标签,这样可以使JSP代码更加简洁. 这些可重用的标 ...

  7. android自定义控件(3)-自定义当前按钮属性

    那么还是针对我们之前写的自定义控件:开关按钮为例来说,在之前的基础上,我们来看看有哪些属性是可以自定义的:按钮的背景图片,按钮的滑块图片,和按钮的状态(是开还是关),实际上都应该是可以在xml文件中直 ...

  8. 基于Spring的可扩展Schema进行开发自定义配置标签支持

    一.背景 最近和朋友一起想开发一个类似alibaba dubbo的功能的工具,其中就用到了基于Spring的可扩展Schema进行开发自定义配置标签支持,通过上网查资料自己写了一个demo.今天在这里 ...

  9. 自定义JSTL标签和函数库

    一.自定义JSTL标签 1.编写标签处理类: (1)实现 SimpleTag 接口,通过 setJspContext()方法可以获取到 jspContext 对象,实际上也是 pageContext ...

随机推荐

  1. 参加2012 Openstack亚太技术大会

    参加2012 OpenStack亚太技术大会 OpenStack是一个由Rackspace发起.全球开发者共同参与的开源项目,旨在打造易于部署.功能丰富且易于扩展的云计算平台.OpenStack企图成 ...

  2. Windows安全攻略:教你完全修复系统漏洞

    Windows安全攻略:教你完全修复系统漏洞 首发:http://safe.it168.com/a2012/0709/1369/000001369740.shtml 目前互联网上的病毒集团越来越猖狂, ...

  3. 分享vue中 slot用法

    //slot默认用法 //slot带参数name用法

  4. 使用js实现简单放大镜的效果

    实现原理:使用2个div,里面分别放大图片和小图片,在小图片上应该还有一个遮罩层,通过定位遮罩层的位置来定位大图片的相对位置,而且,遮罩层的移动应该和大图片的移动方向相反 关键: 大图片和小图片大小比 ...

  5. 洛谷 P2309 loidc,卖卖萌

    P2309 loidc,卖卖萌 题目背景 Loidc萌萌哒. 他最近一直在靠卖萌追求他的真爱——vivym,经过几轮攻势后vivym酱眼看就要被他所攻略.擅长数据结构的vivym决定利用强大的数据结构 ...

  6. 读书笔记-深入理解JVM虚拟机-1.OOM初探

    Java堆OOM(Out-Of-Memory)异常 执行例如以下程序,爆出异常 java.lang.OutOfMemoryError: Java heap space /** * VM Args:-X ...

  7. Android ScrollView滚动实现大众点评、网易云音乐评论悬停效果

    今天听着网易云音乐,写着代码,真是爽翻了. http://blog.csdn.net/linshijun33/article/details/47910833 网易云音乐这个产品亮点应该在评论这一模块 ...

  8. easyui datagird 总计栏

    在使用easyui 的表格的时.非常多时候须要加一个总计栏,当然easyui中有加总计栏的方法,写一个footer就好,然而我认为这样的方法并不好.由于加入的总计栏是和列表每一个单元格相应的,有长度限 ...

  9. 小白算法之路-非确定性多项式（non-deterministic polynomial，缩写NP）

    前端小白的算法之路   时隔多日终于解决了埋在心头的一道难题,霎时云开雾散,今天把一路而来碰到的疑惑和心得都记录下来,也算是开启了自己探索算法的大门. 问题背景 曾经有一个年少轻狂的职场小白,在前端圈 ...

  10. 82.QT实现委托构造

    #include "mainwindow.h" #include <QApplication> //创建一个MainWindow类 class myclass { pr ...