【翻译】详解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-前缀可以确保它会被浏览器忽略。对于浏览器和网站实际上的最终用户而言,该数据不存在。
标准上是这样说的(我们强调):
- 存储可能需要在以后的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/
【翻译】详解HTML5 自定义 Data 属性的更多相关文章
- HTML5自定义data属性
可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role=&qu ...
- 【转载】HTML5自定义data属性
可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role= ...
- 详解HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- (转载)详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- js(jQuery)获取自定义data属性的值
有时候因为需要在标签上设置自定义data属性值, <div class="col-sm-6 col-md-4" id="get_id" data-c_id ...
- Net is as typeof 运行运算符详解 net 自定义泛型那点事
Net is as typeof 运行运算符详解 概述 在了解运行运算符的前提我们需要了解什么是RTTI ,在任何一门面向对象的语言中,都有RTTI这个概念(即 运行时). RTTI(Run-Ti ...
- $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
随机推荐
- 用matplotlib对数据可视化
下图是要用到的数据集,反映了从1984到2016年的失业率的变化 1.导入可视化模块import matlibplot.pyplot as plt, 函数plt.plot(x, y)确定折线图的点,x ...
- 第四周课程总结&第二次实验报告
实验二 Java简单类与对象 实验目的 掌握类的定义,熟悉属性.构造函数.方法的作用,掌握用类作为类型声明变量和方法返回值: 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实例的方法和属性 ...
- docker之配置TensorFlow的运行环境
Docker是一种 操作系统层面的虚拟化技术,类似于传统的虚拟机.传统虚拟机技术是虚拟出一套硬件后,在其上运行一个完整操作系统,在该系统上再运行所需应用进程:而容器内的应用进程直接运行于宿主的内核,容 ...
- [转帖]华为海思Hi1620芯片发布在即 7nm制程ARM架构最高可达3.0GHz
华为海思Hi1620芯片发布在即 7nm制程ARM架构最高可达3.0GHz https://www.cnbeta.com/articles/tech/850561.htm 中电科旗下的普华软件 支持国 ...
- Bootstrap字体图标Font-Awesome 使用教程
转载自:https://blog.csdn.net/crper/article/details/46293295 以备记录使用.
- POJ 3410 Split convex polygon(凸包)
题意是逆时针方向给你两个多边形,问你这两个多边形通过旋转和平移能否拼成一个凸包. 首先可以想到的便是枚举边,肯定是有一对长度相同的边贴合,那么我们就可以n2枚举所有边对,接下来就是旋转点对,那么假设多 ...
- HNUSTOJ-1009 格雷码
1009: 格雷码 时间限制: 1 Sec 内存限制: 128 MB提交: 90 解决: 78[提交][状态][讨论版] 题目描述 对于给定的正整数n,格雷码为满足如下条件的一个编码序列:(1) ...
- Markdown在线编辑及预览
推荐一款不错的Markdown语法手册,最可贵的是支持在线编辑预览: Cmd Markdown简介 Cmd Markdown语法手册及在线编辑 补充一些使用技巧: MarkDown实现段首缩进:「Ma ...
- asp,net 传值方式 优缺点比较
.net C#中页面之间传值传参的六种方法 1.QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用 ...
- 2019 安洵杯 Re 部分WP
0x01.EasyEncryption 测试文件:https://www.lanzous.com/i7soysb 1.IDA打开 int sub_416560() { int v0; // eax i ...