武林網(www.vevb.com)文章簡介:html標籤的用用戶屬性通過w3c驗證.
昨天一個朋友的項目,客戶需要通過w3c驗證(可能你認為這是很操蛋的一件事情,其實我也這樣認為, 瀏覽器兼容才是硬道理, 但顧客就是死了很多年但人們還以為他還活著一個扯蛋的東東,西方人叫做上帝-god, 狗的,就差一個ri,他們的需求,不滿足就沒辦法呀)。但是他在標籤裡寫了一些用戶屬性,所以通不過。問我解決的方案,想了一些方法給他。首先解釋一下什麼叫用戶屬性,如果你是高手,可以不用看。 <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 )來獲取數據
當然,只是個人的一些想法。