HTML之Data attributes
HTML 语法
语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一片文章,你想要存储一些没有可视化展现意义的额外信息。请使用data属性:
<articleid="electriccars"data-columns="3" data-index-number="12314" data-parent="cars"> ... </article>
JavaScript 访问Edit
在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用getAttribute()配合它们完整的HTML名称去读取它们,但标准定义了一个更简单的方法:DOMStringMap你可以使用dataset读取到数据。
为了使用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 访问Edit
请注意到,data attributes设定为HTML属性,他们同样能被CSS访问.比如你可以通过generated content使用函数attr()来显示data-parent的内容:
article::before {content: attr(data-parent); }
你同样可以在CSS中使用属性选择器根据data来改变样式:
article[data-columns='3'] {width: 400px; } article[data-columns='4'] { width: 600px; }
你可以在这个JSBin 的实例里面看到全部的演示。
Data属性同样可以存储不断变化的信息,比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得的花俏的效果,这里你并不需要你编写你常规的编写方案。 请参考这个视频 (JSBin example).
IssuesEdit
不要在data attribute里储存需要显示及访问的内容,因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。
IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准,但所有更早期的版本都不支持dataset。为了支持IE10及以下的版本,你必须使用getAttribute() 来访问。另外,读取 data-attributes的行为相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。
出处:https://www.jianshu.com/p/b4f297ad3c04
转载于:https://www.cnblogs.com/zhou195/p/8398684.html
HTML之Data attributes相关推荐
- 使用data attributes
本文由本人翻译自:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes HTML5是具有扩展性的设 ...
- Delete Master Data时的注意事项
Company Code,一个简单的infoobject,我们发现里面有垃圾数据,想要做这个操作,点下去,后果是什么呢? 首先会询问你是否和SID一起删除. When deleting master ...
- Z-Stack Home Developer's Guide—6. Clusters, Commands and Attributes中文翻译【Z-Stack Home 1.2.0的开发文档】
这篇文章将翻译Z-Stack Home Developer's Guide开发文档中的6. Clusters, Commands and Attributes部分,在Z-Stack中Cluster.C ...
- html 5实用特性之data属性
HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5 ...
- Core Data 教程:多托管对象上下文
原文:Multiple Managed Object Contexts with Core Data Tutoria 作者:Matthew Morey 译者:kmyhy 托管对象上下文是一个专门给托管 ...
- 【11g】数据盒Data Cartridges
1 Introduction to Data Cartridges 除了对关系模型下有序数据的高效和安全管理之外,Oracle还支持对象模型下组织的数据.对象类型和其他特性,如大型对象(lob).外部 ...
- 激光雷达基础-光探测和测距-遥感
激光雷达基础-光探测和测距-遥感 激光雷达或光探测和测距是一个活跃的遥感系统,可以用来测量广泛地区的植被高度.本文将介绍激光雷达(或激光雷达)的基本概念,包括: 什么是激光雷达数据. 激光雷达数据的关 ...
- swift文件服务器,Swift3一行代码将各种类型文件上传到服务器
由于之前一直在忙项目,很久没有写过一篇像样的文章了,现在手上的项目基本是完成了,正好工作时间偷个懒写两篇文章. 将相机或相册图片上传到服务器 先看看最常见的图片上传,也可以选择跳过,后面有直接的封装方 ...
- UIImage 各种处理(分类)
1 @interface UIImage (conversion) 2 3 //压缩图片到宽度1024 4 + (UIImage *)imageCompressSizeToMin1024Width:( ...
最新文章
- Ubuntu 和 Redhat / Fedora 服务管理命令对比表(附Fedora16新的服务管理工具systemctl )...
- 发现自己的BLOG被转载了
- CTFshow 命令执行 web43
- 微信公众平台开发(24) 自定义菜单功能开发
- php 隐式路由,关于Laravel 7 的简单隐式路由模型绑定
- Go与PHP区别:类型 引用 语法 错误 性能 应用 生态
- linux vim 插件管理,linux: vim插件管理
- c语言实现c++的继承和多态
- (9) ab测试工具安装与使用
- 鲁九的六人小聚:夏吕吕岳倪兴
- sharepoint当流程流转到某个节点对文档进行水印操作
- MapXtreme开发(二)
- 留住用户的APP弹窗设计素材模板
- 十大算法 — 插入排序法【C语言代码诠释】
- python按字节读文件-使用Python进行二进制文件读写(转)
- Windows搭建Sosoapi
- ARM开发经典学习网站推荐
- 网站出现 502 Bad Gateway 怎么解决?
- linux在磁盘容量扩容后扩容文件系统
- 大数据数仓建模(3)
热门文章
- 3.2 腾讯云AI解决方案
- Error:A fatal exception has occurred.Program will exit
- 获取今日头条街拍图片
- 怎么说话比说什么更重要
- c语言求最小公倍数_最小公倍数
- 计算机DNS怎么配置,如何设置电脑的dns地址
- pygame: libpng warning: iCCP: known incorrect sRGB profile 报错
- illumina测序的一些注意事项
- python import 类如何捕获clrt c_PEP8 python规范神器
- fedora16上搭建lxr-1.2.0