Html 5中自定义data-*特性
Html 5中支持用户自定义的data-*特性，它们在UI是不可见的。例如data-length,它可以附加在input的标签上。更加具体信息可参考W3C Html 5 data-说明书
有这么一段描述:
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
接下来我们就可以实现这样一个简单例子:
<!DOCTYPE html>
<html>
<head>
<title>Html5 custom data attribute Test</title>
</head>
<body >
<li class="user" data-name="Peter Liu" data-city="ShangHai"
data-lang="CSharp" data-food="apple">
<b>Peter says:</b> <span>Hello, how are you?</span>
</li>
<script type="text/javascript">
var user = document.getElementsByTagName("li")[0];
var pos = 0, span = user.getElementsByTagName("span")[0];
var phrases = [
{ name: "city", prefix: "I am from " },
{ name: "food", prefix: "I like to eat " },
{ name: "lang", prefix: "I like to program in " }
];
user.addEventListener("click", function () {
var phrase = phrases[pos++];
// Use the .dataset property
span.innerHTML = phrase.prefix + user.dataset[phrase.name];
}, false);
</script>
</body>
</html>
上面的li标签中嵌入一些data-*特性，当你点击那个span，读取了每个data-*的value, 最后实现一个切换文字效果。你有注意到上面js中有用到一个dataset属性。W3C官方也是有关于dataset的介绍http://www.w3.org/TR/2012/WD-html5-20120329/global-attributes.html#dom-dataset。上面的代码测试通过在 Firefox 11.0, Chrome 18.0.1025.151
注意这个在IE9是不支持的。 IE9 需要改写为getAttribute
<!DOCTYPE html>
<html>
<head>
<title>Html5 custom data attribute Test</title>
</head>
<body >
<li class="user" data-name="Peter Liu" data-city="ShangHai"
data-lang="CSharp" data-food="apple">
<b>Peter says:</b> <span>Hello, how are you?</span>
</li>
<script type="text/javascript">
var user = document.getElementsByTagName("li")[0];
var pos = 0, span = user.getElementsByTagName("span")[0];
var phrases = [
{ name: "city", prefix: "I am from " },
{ name: "food", prefix: "I like to eat " },
{ name: "lang", prefix: "I like to program in " }
];
user.addEventListener("click", function () {
var phrase = phrases[pos++];
// Use the .dataset property
span.innerHTML = phrase.prefix + user.getAttribute('data-'+phrase.name);
}, false);
</script>
</body>
</html>
上面的代码在IE 9.0.8112测试通过。您也可以在IE, FF中单步调试js看其中结果
分享到：
相关推荐
HTML5中的自定义`data-*`属性是为了解决在HTML元素上存储额外数据的需求而引入的。这些属性允许开发者在不破坏HTML结构和语义的前提下，附加自定义的、非标准的数据。通常，这些数据在页面呈现时并不会直接显示，但...
在HTML5中，`data-*`属性的格式是以`data-`为前缀，后面跟着你自定义的名称。例如，`data-uid`和`data-uname`。这样的属性可以在元素上自由添加，用于存储任何非标准的数据信息。在上面的例子中，我们看到一个`<div>...
HTML5的自定义data-*属性是为了在HTML标签中存储额外的数据而引入的，这使得开发者能够在不违反HTML规范的情况下，方便地在DOM元素上附加信息。这些属性的名称以"data-"开头，允许开发者自由定义其后的部分，例如...
HTML5的data-*属性是为了解决网页或应用程序中存储私有自定义数据的需求而引入的新特性。这个属性允许开发者在HTML元素上嵌入自定义的数据，而不影响标准的语义。data-*属性的命名规则非常简单：以"data-"开头，后面...
标题中提到的“jQuery中使用data()方法读取HTML5自定义属性data-*实例”涉及的知识点主要是jQuery库中data()方法的使用，以及它和HTML5自定义属性data-*的关联。在现代Web开发中，data-*属性允许开发者在标准的HTML...
HTML5的`data-*`属性，特别是`data-role`，是jQuery Mobile框架中用来初始化和配置小部件的关键特性。这些自定义属性允许开发者通过标记直接设置组件的行为和配置，为移动应用开发提供了便利。虽然使用`data-*`属性...
HTML5中的data-*自定义属性是一种非常有用的特性，可以用来存储和操作数据。在使用时需要注意区别于标准的HTML属性，并且需要添加前缀data-。同时，需要注意使用getAttribute()方法和dataset操作自定义属性的差异。
HTML5的`data-*`自定义属性是现代网页开发中非常实用的一项功能，它允许开发者在HTML元素上存储额外的数据，这些数据不直接用于渲染，但可以在JavaScript中方便地访问和处理。在早期的HTML标准中，为了附加自定义...
- **注意**：HTML4.01中已经不支持此属性，但在HTML5中重新启用。 ##### 2. **class** - **描述**：用于定义元素的类名，便于使用CSS对元素进行样式化处理。 - **示例**：`这是一个高亮段落。</p>` ##### 3. **...
- **CVOM 图表**：CVOM图表是一种用于展示复杂数据的图表类型，在SAP UI5中有多种图表类型可供选择。 - **性能优化**： - **资源加载优化**：减少HTTP请求数量，提高加载速度。 - **内存管理**：合理分配和释放...
**特性总结**: - **简洁性**: 语法基于JavaScript的一个子集，易于掌握。 - **全面性**: 支持大多数流行的模板引擎的功能，比如FreeMarker。 - **高性能**: 在优化模式下，性能优于多数模板引擎。 - **创新性**: ...
- **特性**：轻量级、模块化，易于部署，支持云环境。 #### Getting Started - **入门**：介绍如何开始使用 ASP.NET Core 构建应用程序。 - **工具**：推荐使用 Visual Studio 或 Visual Studio Code 开发 ASP.NET ...
- **Data-Aware控件**（如XtraGrid, XtraPivotGrid）：深入探讨DevExpress中的Data-Aware控件，如XtraGrid和XtraPivotGrid，如何为用户提供高效的数据浏览和分析工具。 #### 用户界面 - **显示**： - **...
- **新特性介绍**：相对于 ASP.NET MVC 5 的更新内容。 - **兼容性和升级**：如何平滑地从旧版本升级到 5.1 版本。 - **性能改进**：介绍性能方面的提升措施。 #### 总结 ASP.NET MVC 5 是一个强大且灵活的框架，...
Vue 提供了一些额外的特性，如名称、分隔符等。 - **name**: 组件名称。 - **delimiters**: 改变默认文本插值分隔符。 - **functional**: 标记一个组件为函数式组件。 - **model**: 自定义组件的 prop 和 event 来...
3.0版本增加了以下重要特性： - 改进了文档加载速度。 - 增强了安全性和稳定性。 - 优化了界面布局，提升了用户体验。 - 新增了手写签名和电子印章的支持。 #### 四、详细功能列表 - **文档操作**：包括创建新文档...