HTML data属性简介以及低版本浏览器兼容算法
实例
使用 data-* 属性来嵌入自定义数据:
<ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul>
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
支持 | 支持 | 支持 | 支持 | 支持 |
所有主流浏览器都支持 data-* 属性。
定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
- 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
- 属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。
语法
<element data-*="somevalue">
属性值
值 | 描述 |
---|---|
somevalue | 规定属性的值(以字符串)。 |
HTML adta-*属性
==============【以上来自W3School】===================
【外加信息】
HTML标签可以添加自定义属性来存储和操作数据。但这样做会导致html语法上不符合Html规范。HTML5规范里增加了一个自定义data属性,自定义data属性的用法非常的简单,就可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
下面的一个代码片段是一个有效的HTML5标记:
<div id="item" data-id='123'>11111</div>
可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性。
举个例子,你可以用下面的写法读取 data-id属性值--123:
var myid= jQuery("#item").data('id');
你还可以在"data-*" 属性里使用json语法,
<div id="item" data-id='{"game":"on"}'></div>
你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:
var gameStatus= jQuery("#item").data('id').game;
你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。
================
==============【data属性低版本兼容】==================
【DEMO】
【效果】
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>dataset</title><style>li{cursor: default;line-height: 1.8;}table{border-collapse: collapse;}th, td, caption{padding: 10px;border: 1px solid #ddd;font-size: 14px;}th{color: #999;}caption{font-size: 20px;font-weight: bold;border-bottom: none;}#card{position: absolute;top: 10px;left: 150px;}</style>
</head>
<body><ul><li data-id="123456" data-account-name="张威"data-name="张威" data-email="17777777777@163.com" data-mobile="17777777777">张威</li><li data-id="123457" data-account-name="JokerWill"data-name="JokerWill" data-email="13333333333@163.com" data-mobile="13333333333">JokerWill</li></ul><div id="card" style="display:none"><table><caption id="accountName"></caption><tr><th>姓名:</th><td id="name"></td></tr><tr><th>邮箱:</th><td id="email"></td></tr><tr><th>手机:</th><td id="mobile"></td></tr></table></div><script>function $(id){return document.getElementById(id);}var lis = document.getElementsByTagName('li');for(var i = 0, li;li = lis[i]; i++){li.onmouseenter = function(event){event = event || window.event;var user = event.target|| event.srcElement;//var data = user.dataset;var data=get_dataset(user);$('accountName').innerText = data.accountName;$('name').innerText = data.name;$('email').innerText = data.email;$('mobile').innerText = data.mobile;$('card').style.display = 'block';};li.onmouseleave = function(event){$('card').style.display = 'none';};}//带兼容的函数function get_dataset(ele){if(ele.dataset)return ele.dataset;else{//一下是兼容代码var dataset = {};var ele_split = ele.outerHTML.split(" ");for(var i = 0,element; i < ele_split.length; i++) {element = ele_split[i];if (element.substring(0,4) == "data") { if (element.indexOf(">") != -1) { element = element.split(">")[0];};ele_key=element.split("=")[0].slice(5);ele_value=element.split("=")[1].slice(1,-1);if(ele_key.indexOf("-") == -1){dataset[ele_key] = ele_value;}else{ele_keys=ele_key.split("-");ele_key=ele_keys[0];for(i=1;i<ele_keys.length;i++){ele_key+=replaceReg(ele_keys[i]);} }};}return dataset;}}//正则表达式变换首字母大写function replaceReg(str){ var reg = /\b(\w)|\s(\w)/g; str = str.toLowerCase(); return str.replace(reg,function(m){return m.toUpperCase()}) }</script>
</body>
</html>
【关键代码】
//带兼容的函数
function get_dataset(ele){if(ele.dataset)return ele.dataset;else{//一下是兼容代码var dataset = {};var ele_split = ele.outerHTML.split(" ");for(var i = 0,element; i < ele_split.length; i++) {element = ele_split[i];if (element.substring(0,4) == "data") { if (element.indexOf(">") != -1) { element = element.split(">")[0];};ele_key=element.split("=")[0].slice(5);ele_value=element.split("=")[1].slice(1,-1);if(ele_key.indexOf("-") == -1){dataset[ele_key] = ele_value;}else{ele_keys=ele_key.split("-");ele_key=ele_keys[0];for(i=1;i<ele_keys.length;i++){ele_key+=replaceReg(ele_keys[i]);} }};}return dataset;}}
转载于:https://www.cnblogs.com/zwwill/p/7391398.html
HTML data属性简介以及低版本浏览器兼容算法相关推荐
- 低版本浏览器兼容处理
1.HTML5新标签对IE低版本浏览器的兼容处理 问题概述:IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签不兼容 1)使用JavaScript新增元素的方法 ...
- h5开发解决华为自带低版本浏览器兼容的问题
先说明一下场景,要求做一个h5贷款的表单提交,既能在app内使用也app外面使用,app使用版本高,自然不用太多考虑兼容性问题,flex布局随意发挥,但在app外面使用的场景就复杂得多,市面上的主流机 ...
- 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录 一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法 和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
- 解决ie8及低版本浏览器不支持html5标签属性
html5新标签<head>.<nav>.<footer>兼容性 - 经验小结,处理方案 IE支持: IE8或更早的版本不支持HTML5的<nav>标签 ...
- 低版本浏览器使用最新渲染模式以免IE不支持CSS3属性
1.让IE使用最新的渲染模式,告诉低版本浏览器使用最新渲染模式以免IE不支持CSS3属性 <meta http-equiv="X-UA-Compatible" content ...
- jQ进阶篇--jQuery封装placeholder效果,让低版本浏览器支持该效果
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
- AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- html表单居中_如何在IE低版本中兼容HTML5表单属性placeholder属性
WEB开发数据提交是必不可少的,为了更友好的用户体验,通常需要给输入框一个默认的提示信息.HTML5技术提供了一个表单属性placeholder专门用于输入框默认提示,但是在IE低版本中根本不兼容. ...
- element ui 兼容低版本浏览器
基于ES6的用Vue框架element ui写的页面,如果当需要解决兼容低版本浏览器时,会遇到在低版本浏览器中不显示效果,页面一片空白,但控制台也不报错,而在高版本可以正常显示的情况. 低版本效果: ...
最新文章
- 《SQL与关系数据库理论——如何编写健壮的SQL代码》一第3章
- (原)Eclipse中将JNI生成的so打包成jar的步骤
- 基于kb的问答系统_1KB以下基于表的Q学习
- 基于php的工厂管理系统,PHP设计模式——工厂模式
- (计算机组成原理)第二章数据的表示和运算-第三节3:浮点数加减运算
- 华为云企业级Redis评测第一期:稳定性与扩容表现
- 斯诺登NFT作品拍得者PleasrDAO将继续收藏NFT艺术品
- server2008R2WSUS管理之 计算机管理
- L1-052 2018我们要赢 (5 分)—团体程序设计天梯赛
- 英语发音规则---U字母-[复习中]
- ExecutorService中submit和execute、Runnable和Callable
- matlab版本和yalmip兼容,科学网—matlab cvx + yalmip - 吴锐的博文
- spring-quartz表达式介绍
- 一文了解多肽修饰(环肽合成,多肽磷酸化标记,多肽蛋白偶联,甲基化及其它烷基化修饰,荧光修饰)定制合成技术介绍
- centos官网下载地址
- 【冬瓜哥论文】浅析固态介质在存储系统中的应用方式
- OOP Class具体解释
- 冷门创业项目:自媒体赚钱速成之搬运大法
- 防止表单重复提交的实现方法!
- 宇视网络视频录像机国标对接配置指导