二十六、data属性(The Data Attribute)

　　我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：

<h1 id=someId customAttribute=value> 小样，胆儿挺肥的呢 </h1> 

　　校验器会小题大做!但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。

　　HTML片段

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉，lady 嘎嘎 </div> 

　检索自定义属性的价值

var theDiv = document.getElementById('myDiv');var attr = theDiv.getAttribute('data-custom-attr');alert(attr); // My Value 

　　此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：

CSS代码：.data_custom { display:inline-block; position: relative; }.data_custom:hover { color: transparent; }.data_custom:hover:after {    content: attr(data-hover-response);    color: black;    position: absolute;    left: 0;} 

　　HTML代码：

<a class="data_custom" data-hover-response="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a> 

　　如果你的浏览器支持after伪类，以及content的attr属性，则可以看到类似下面的效果(IE8不一样)：

　　还有，content属性其实是一个非常强大的属性，由于低版本的IE不支持，所以此属性尚未流行，关于content内容生成技术，可以参见我之前的“CSS content内容生成技术以及应用”这篇文章。