使用data attributes

本文由本人翻译自:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

HTML5是具有扩展性的设计,它初衷是数据应与特定的元素相关联,但不需要任何定义。data-* 属性允许我们在标准内于HTML元素中存储额外的信息,而不许需要使用类似于 classList,标准外属性,DOM额外属性或是 setUserData之类的伎俩。

HTML 语法

语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一片文章,你想要存储一些额外的信息但你又没有任何可视化的representation。请使用数据属性:

1 <article
2   id="electriccars"
3   data-columns="3"
4   data-index-number="12314"
5   data-parent="cars">
6 ...
7 </article>

JavaScript 访问

在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的HTML名称去读取它们,但标准定义了一个更简单的方法:{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。

To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).

通过dataset对象去获取到数据属性,获取属性名以data-开头的内容

var article = document.querySelector(‘#electriccars‘);

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

每一个属性都是一个可读写的字符串。在上面的例子中,article.dataset.columns = 5.将会调整属性的值为5。

CSS 访问

请注意到,data attributes设定为HTML属性,他们同样能被CSS访问.比如你可以通过generated content使用函数{{cssxref("attr")}}来显示data-parent的内容:

article::before {
  content: attr(data-parent);
}

你同样可以在CSS中使用属性选择器根据data来改变样式:

1 article[data-columns=‘3‘] {
2   width: 400px;
3 }
4 article[data-columns=‘4‘] {
5   width: 600px;
6 }

你可以在这个JSBin的实例里面看到全部的演示。

Data属性同样可以存储不断变化的信息,比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得的花俏的效果,这里你并不需要你编写你常规的编写方案。 请参考这个视频  (JSBin example).

Issues

不要在data attribute里储存需要显示及访问的内容,因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。

IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准,但所有更早期的版本都不支持dataset。为了支持IE10及以下的版本,你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外,读取 data-attributes的行为相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。

参阅

时间: 2024-10-07 06:15:52

使用data attributes的相关文章

HTML之Data attributes

HTML 语法 语法非常简单.所有在元素上以data-开头的属性为数据属性.比如说你有一片文章,你想要存储一些没有可视化展现意义的额外信息.请使用data属性: <article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article> JavaScript 访问Edit

html 5实用特性之data属性

HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置,jquery也提供了支持的支持.这使得data属性特别灵活,也非常强大.有了这样的属性我们能够更加有序直观的进行数据预设或存储

HTML 5:你必须知道的data属性

原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可以让你给元素自定义数据.这篇文章就是思考怎么更好的使用Data属性. 介绍 HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. 随着网站自身的数据越来越多,一些特

Cross-Domain Security For Data Vault

Cross-domain security for data vault is described. At least one database is accessible from a plurality of network domains, each network domain having a domain security level. The at least one database includes at least one partitioned data table tha

Bootstrap-Select插件

Bootstrap Select 是使用按钮下拉的 Bootstrap 风格的自定义的选项和多选. option Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style="" or data-selected-text-format="count". Core opti

李洪强详细介绍SDWebImage

SDWebImage是一个开源的第三方库,它提供了UIImageView的一个分类,以支持从远程服务器下载并缓存图片的功能.它具有以下功能: 提供UIImageView的一个分类,以支持网络图片的加载与缓存管理 一个异步的图片加载器 一个异步的内存+磁盘图片缓存 支持GIF图片 支持WebP图片 后台图片解压缩处理 确保同一个URL的图片不被下载多次 确保虚假的URL不会被反复加载 确保下载及缓存时,主线程不被阻塞 从github上对SDWebImage使用情况就可以看出,SDWebImage在

38-oc常用结构体

常用结构体 在开发中苹果推荐我们使用CG开头的结构体, 也就是说NS开头的结构体一般不用 OC中定义一个点,用什么结构体 NSPoint; CGPoint point = NSMakePoint(10, 20); OC中保存物体尺寸的,用什么结构体 NSSize; CGSize size = NSMakeSize(100, 50); OC中保存某个物体的位置和尺寸,用什么结构体 NSRect; CGRect rect = NSMakeRect(10, 20, 100, 50); NSNumber

UI_19 数据持久化(本地存储)

一.数据持久化概述 数据持久化就是数据的永久存储.其本质是将数据保存为文件,存到程序的沙盒中. 1.数据持久化的方式 1.1 writeToFile:简单对象写入文件 1.2 NSUserDefaults:应用程序偏好设置1.3 Sqlite:轻量级关系型数据库,不能直接存储对象(NSData除外),需要用到一些SQL语句,先将复杂对象归档(对象->NSData) 1.4 CoreData:对象型数据库,实质是将数据库的内部存储细节封装 1.5 Plist文件 2.应用程序沙盒 每一应用程序都有

iOS UIWebview 缓存文件。

最初我以为: testCache = [[NSURLCache alloc]initWithMemoryCapacity:1024*1024*12 diskCapacity:1024*1024*120 diskPath:@"Assitant.db"]; [NSURLCache setSharedURLCache:testCache]; 就能让webview自动的控制缓存,没想到图片还是每次都在重新加载.实在就想不通了,120M还存不下?不知道是不是我用法没对. 后来经过一番查阅之后,发