【翻译】详解HTML5 自定义 Data 属性

原标题: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-前缀可以保其见面给浏览器忽略。对于浏览器与网站实际上的最终用户而言,该数量不存在。

标准达到是这么说的(我们强调):

从今定义数据性用于存储网页还是应用程序的个体自定义数据,因为没更合适的特性或因素。

这些性不适用于独立为下这些性之网站的软件。

每个HTML元素都可以起擅自数量之自定义属性与其他价值。

 

争采取?

 

坐从定义属性是HTML5,所以她们得以在其他支持HTML5的浏览器中以。这就是是全体了。除了帮忙为后相当以外,这吗管从定义数据性在未来依以凡一个但扩大的、跨平台的解决方案。

如今咱们对数据性有一个宽广的懂得,让我们看她们什么行使:

  • 积存可能得以后头的JavaScript动画计算的因素的上马高度要不透明度

  • 存储通过JavaScript加载的Flash动画的参数

  • 储存于定义之网页标签数据,如同Jason
    Karns展示的

  • 囤一个因素的例行,弹药或生数据,在JavaScript游戏中

  • 推进访问JavaScript <video>字幕,如同Bruce
    Lawson展示的

 

勿应当举行呀?

 

尽管很灵敏,但多少性并无称解决所有问题。

  • 苟产生一个现有的特性或因素,适合您的数码存储,则未答应下数据性。比如,在一个光阴,日期/时间数额应存放于语义化的时光元素里要是无是储存于由定义数据性里。

  • 由定义数据性不打算和微格式竞争。这在业内中理解地证实了,数据不相符公开数量采取。外部软件无承诺同它进行互动。标记联系人详细信息或事件的底细使用自定义属性之数是蹭的,当然,除非她是单纯供您自己之其中脚论以。

  • 特定数据性的存或者缺失失不承诺吃看成其他样式的CSS钩子。这样做表明你存储的数对用户如着重,应采取重复语义化的标记。

 

通过JavaScript使用data-*属性

 

既然我们知晓了于定义数据性是什么,以及我们什么时候可用它们,现在咱们应有看我们怎样以JavaScript与它们相。

如果我们怀念使用本生JavaScript获取或涂改这些性,那么我们得以使用getAttribute和setAttribute方法,如下所示:

<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>

夫方式将当拥有现代浏览器工作,但其不是数性原本的用法。第二单(新的与改良之)方式来实现同的事体是经过看一个元素的数据集属性。此数据集属性——新HTML5
JavaScript
API的相同部分——将赶回所有选定的要素的数性的一个DOMStringMap对象。使用这种方法,不必采取完整的属性之名,你得摒弃数据前缀,直接下自己定义之号。属性的名称将会更换为驼峰命名式的名目。

<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>

一旦有数性不再需要,也得经安装它为null来完全变除该属性。

plant.dataset.leaves = null; // 毛毛虫攻击!

倒霉的是,新的多少集属性尚未为有着浏览器被支持,所以又最好要前方所示使用getAttribute和setAttribute。

开应用程序时,你发觉能够通过由定义的数码性之价来抉择素。这好便捷、轻松地用querySelectorAll实现,如下所示:

// 选择所有带有 'data-flowering' 属性的元素
document.querySelectorAll('[data-flowering]');

// 选择所有红叶子的元素
document.querySelectorAll('[data-foliage-colour="red"]');

 

终极一词忠告

 

就数据性越来越常见的采取,发生命名冲突之可能性变得再可怜。如果您采取一个欠想象力的性名称,如data-height,那么稀可能您最终会遇到一个仓库或者插件,它使用同一之属性名称。多只下论获取和设置一个常见的数码性可能会见促成乱。为了避免这种情景,我建议人们选择一个标准字(也许是拖欠网站/插件的称谓)作为持有数据性之前缀, 比

data-html5doctor-height 或者 data-my-plugin-height。

 

总结

 

从定义数据性是一个据此来简化网页遭到之应用程序数据的囤积的百般棒的点子。虽然您还未克只是以新的javascriptAPI,但若可分享getAttribute和setAttribute的便民,他们得以在有主流浏览器上行事。

 

原稿地址:http://html5doctor.com/html5-custom-data-attributes/

 

相关文章