【js学习笔记-083】-----数据集属性

数据集属性

有时在html元素上绑定一些额外的信息也是很有帮助的，当js选取这些元素并以某种方式操纵这些信息时就是很典型的情况。可以通过给class属性添加特殊的标识符来完成。

可以使用getAttribute()和setAttribute()来读和写非标准属性值。但为此而付出的代价昌文档将再是合法有效的HTML。

HTML5提供了一个解决方案。在html5中，以任意”data-”为前缀的小写的属性名字都是合法的。这些“数据集属性”将不会对其元素的表现产生影响，它们定义了一种标准、附加额外数据的方法，并不是在文档合法性上做出让步。

HTML5还在Element对象上定义了dataset属性。该属性指代一个对象，它的各个属性对应于去掉前缀的data-属性。因此dataset.x应该保存data-x属性的值。带连字符的属性对应于驼峰命名法属性名：data-query-test属性就变成dataset.jqueryTest属性

 

例：

<span class=”sparkline” data-ymin=”0”data-ymax=”10”>

 1 11 2 2 3 4 5 5 4

</span>

 

var sparklines =document.getElementsByClassName(“sparkline”);

for(var i=0;i<sparklines.length;i++){

  var dataset = sparklines[i].dataset;

   varymin = parseFloat(dataset.ymin);

  var ymax = parseFloat(dataset.ymax);

  var data = sparklines[i].textContent.split(“ “);.map(parseFloat);

  drawSparkline(sparklines[i],ymin,ymax,data); //该方法未实现

}

 

如果没有实现dataset则就得使用.getAttribute(“data-ymin”);