我们可以设置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有两个参数,第一个参数表示自定义属性名称,第二个参数表示要设置的自定义属性值
?
(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.都可以
参考:
http://hw1287789687.iteye.com/blog/2261455
http://blog.csdn.net/hw1287789687/article/details/51426825(
)
?
原文：http://hw1287789687.iteye.com/blog/2311604