原标题:HTML5 Custom Data Attributes (data-*)
你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的,那么我有一个令人激动的消息要告诉你!如果你回答不是,并且你还想,“咦,这个主意不错哦~”,那我劝你尽早放弃这个幼稚的想法,并看完本文。
多亏了HTML5,我们可以嵌入自定义的 data 属性给所有的HTML元素。这个 data 属性包含两部分:
属性名
属性名以'data-'前缀开头,并且至少要有一个字符。不可以包含大写字母。
属性值
属性值可以是任何字符串。
根据这个语法,我们可以添加应用数据信息给标签,如下所示:
<ul id="vegetable-seeds"> <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li> <li data-spacing="30cm" data-sowing-time="February to March">Celery</li> <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li> </ul>
我们现在可以在JavaScript中使用这些保存的数据来创造更丰富有趣的用户体验。试想一下,当用户点击一颗蔬菜,一个新面板打开,向用户显示额外的种子间距和播种指示信息。因为有了data-属性,我们可以将数据添加给<li>标签,从而展示数据的时候不必进行Ajax,也不必进行服务器端的数据库查询,可以直接从属性中获取数据。
在自定义属性前使用data-前缀可以确保它会被浏览器忽略。对于浏览器和网站实际上的最终用户而言,该数据不存在。
标准上是这样说的(我们强调):
-
存储可能需要在以后的JavaScript动画计算的元素的初始高度或不透明度
-
存储通过JavaScript加载的Flash动画的参数
- 存储自定义的网页标签数据,如同Jason Karns展示的
-
存储一个元素的健康,弹药或生命数据,在JavaScript游戏中
- 推动访问JavaScript <video>字幕,如同Bruce Lawson展示的
不应该做什么?
-
如果有一个现有的属性或元素,适合你的数据存储,则不应使用数据属性。比如,在一个时间,日期/时间数据应该存放在语义化的时间元素里而不是存储在自定义数据属性里。
- 自定义数据属性不打算与微格式竞争。这在标准中清楚地说明了,数据不适合公开数据使用。外部软件不应与它进行交互。标记联系人详细信息或事件的细节使用自定义属性的数据是错的,当然,除非它是只供你自己的内部脚本使用。
-
特定数据属性的存在或缺失不应被用作任何样式的CSS钩子。这样做表明你存储的数据对用户而重要,应使用更语义化的标记。
通过JavaScript使用data-*属性
<div id='strawberry-plant' data-fruit='12'></div> <script> // getAttribute 获取数据属性 var plant = document.getElementById('strawberry-plant'); var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12' // setAttribute 设置数据属性 plant.setAttribute('data-fruit','7'); // 因为该死的鸟…… </script>
<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div> <script> // dataset 获取属性 var plant = document.getElementById('sunflower'); var leaves = plant.dataset.leaves; // leaves = 47; // 'dataset 设置属性 var tallness = plant.dataset.plantHeight; // 'plant-height' -> 'plantHeight' plant.dataset.plantHeight = '3.6m'; // 超级肥料! </script>
plant.dataset.leaves = null; // 毛毛虫攻击!
// 选择所有带有 'data-flowering' 属性的元素 document.querySelectorAll('[data-flowering]'); // 选择所有红叶子的元素 document.querySelectorAll('[data-foliage-colour="red"]');
最后一句忠告
data-html5doctor-height
或者
data-my-plugin-height。
原文地址:http://html5doctor.com/html5-custom-data-attributes/