设置html标签的自定义属性

Misswangdapao

2016-07-16

我们可以设置html标签的自定义属性,例如:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="common_util.js"></script>
    <title>自定义属性</title>
    <script type="text/javascript">
        $(function (event) {
            $('#firstLi').attr('title','这是title').attr('abc','062');
        })
        var getLiValue=function (event) {
            var source=event.target;
            $(source).parent().append('<div>'+$('#firstLi').attr('abc')+'</div>')
        }
    </script>
</head>
<body>
<ul>
    <li id="firstLi" >畅捷通信息技术股份有限公司安保部</li>
    <li></li>
</ul>
<div>
    <div onclick="getLiValue(event)" >获取li的abc属性</div>
</div>
</body>
</html>

我设置了li标签的自定义属性,名称是"abc"(见上例),理论上,我可以设置任意名称的自定义属性,我想叫什么名字就叫什么名字.

自定义属性是相对于内置属性来说的,

内置属性比如 class,style,title等

如何设置自定义属性呢?

使用jQuery有两种方式:

(a)使用attr方法

$('#firstLi').attr('title','这是title').attr('abc','062');

attr有两个参数,第一个参数表示自定义属性名称,第二个参数表示要设置的自定义属性值

设置html标签的自定义属性

(b)使用data方法

设置值:

$('#firstLi').data('id','888');

但是注意一点:使用data设置自定义属性值,在html代码中是看不到的.

使用原生js方法设置自定义属性

/***
 * set custom attribute
 * @param htmlNode22
 * @param attr22
 * @param attrValue
 */
com.whuang.hsj.setCustomAttr=function(htmlNode22,attr22,attrValue)
{
    if('length' in htmlNode22){
        htmlNode22=htmlNode22[0];
    }
	if(htmlNode22.setAttribute===undefined)
	{
		htmlNode22.attributes[attr22].nodeValue = attrValue;
	}else{
		htmlNode22.setAttribute(attr22,attrValue);  // 设置自定义属性的值
	}
};

获取自定义属性值:

/***
 * get custom attribute
 * is same as jquery attr().eg:var inputId=$(this).attr('targetTF');
 * @param htmlNode22
 * @param attr
 * @returns {*}
 */
com.whuang.hsj.getCustomAttr=function(htmlNode22,attr)
{
if('length' in htmlNode22){//jquery 对象
        htmlNode22=htmlNode22[0];
    }
	var hospitalId=htmlNode22[attr];
	if(hospitalId==undefined||hospitalId==null){
        hospitalId=htmlNode22.getAttribute(attr);
    }
	if(hospitalId==undefined||hospitalId==null){
		if(htmlNode22.attributes){
			hospitalId=htmlNode22.attributes[attr].nodeValue;
		}
	}
    return hospitalId;
};

下面着重介绍一个设置自定义属性的坑

ul 中的li定义的value会自动转换为int.数值，ie 浏览器下大于int最大值，显示int最大值，其他浏览器显示为0.而且无论你定义什么值，都会转int.默认为1，例如value=中文。所以如果你想要实现正确取值，就需要换一个li属性例如自定义属性time.或者改一种实现标签元素，例如div.都可以

参考: