HTML5教程：html标签属性通过w3c验证

发布时间：2012-11-17 19:58:40作者：知识屋

项目客户需要通过w3c验证。但是在标签里写了一些用户属性，所以通不过。
首先解释一下什么叫用户属性。 <tag yourAttr="yourAttrValue" ></tag>。红色的部分就是用户属性，有时候我们需要用javascript code某些东西的时候，这个必不可少。但他确实不能通过W3C的验证。

下面是一些解决方案：
一、用子标签隐藏来代替用户属性。
<tag class="normal">
<tag class="myAttr">myAttrValue</tag>
<tag>内容</tag>
</tag>
然后设置css
.myAttr{display:none;}
怎么获取那个数据，可以自己去查一下。

二、使用HTML5 DTD + data- 来解决
html5支持用户自定义属性，但要求必须以“data-”开始，可以通过验证。
<tag data-myAttr="myAttrValue"></tag>

三、使用通用属性来解决
title属性是大多数标签都可以有的，完全可以通过验证。
<tag title="myAttrValue"></tag>
可是，问题来了，当鼠标移动到标签上，title直接显示出来，很不好的用户体验。
所以，想到了用javascript或者jquery来解决这个问题：
(function($){
$.fn.setUserAttr=function(options){
var defaults={dataName:"userData"};
var opts = $.extend({},defaults,options||{});
return this.each(function(){
$this=$(this);
var userAttrVal=$this.attr("title");
$this.attr("title","").data(opts.dataName,userAttrVal);
})
};
})(jQuery)

html:
<tag class="useAttr" title="myAttrValue"></tag>

应用：
$(".useAttr").setUserAttr();
通过$(".useAttr").data("userData")来获取数据.
或者
$(".useAttr").setUserAttr({dataName:"yourAttrName"});
通过 $(".useAttr").data("yourAttrName ")来获取数据

（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）