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="[email protected]"
			data-mobile="17777777777">张威</li>
		<li data-id="123457" data-account-name="JokerWill"
			data-name="JokerWill" data-email="[email protected]"
			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;
	}

}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-05 20:48:56

HTML data属性简介以及低版本浏览器兼容算法的相关文章

让IE低版本浏览器也支持placeholder属性

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>让IE低版本浏览器也支持placeholder属性</title>    

AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器

AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的文字和其他因地区而异的数据从应用中抽离出来. 本地化意味着为这些抽离的数据和文字提供翻译和转变成本地的格式. 目前,AngularJS支持日期,数字和货币的国际化和本地化. 另外,AngularJS还通过ngPluralize指令支持本地多元化. 所有的AngularJS本地化组件都依赖于$loca

jQuery封装placeholder效果,让低版本浏览器支持该效果

页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支

IE8及低版本浏览器不支持CSS3 media queries的解决方法

问题:IE8及其以下低版本IE浏览器在缩小窗口时,UI没有按照相应的要求显示窗口缩小时对应的布局:其他浏览器正常. 定位过程: 其实开始拿到问题时是无从下手,不知所以然,根本就没听说还有media这个CSS属性,就更不知道它的功能了.但是对于解决UI问题,有自己的一套思路,就是首先要思考为什么会错误以及为什么没有错误两个方面,然后针对这两个方面的疑问把html或js或css文件简化再简化,修改再修改,查看UI变化,从而缩小问题范围,最后找出问题根源. 如此我就想为什么其他浏览器界面布局没有问题呢

低版本浏览器常轮训

  $("#ajax").on("click",{btn:$('#ajax')},function(evdata){      $.get("pull",{id:13},function(data){      console.info(data);      evdata.data.btn.click();      },"json");     }); @RequestMapping(value = { "pul

兼容低版本浏览器的getElementByClassName方法

/*兼容低版本浏览器的getElementByClassName方法*/ function getElementsByClassName(root,className){ if(root.getElementsByClassName){ return root.getElementsByClassName(className); }else{ var elements=root.getElementsByTagName(); var result=[]; for(var i=0,element;

使用html5兼容低版本浏览器

因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签的,只是展示的内容而已,如果你给header添加一个样式,肯定是不可以的,我们要解决的就是让低版本的浏览器认识并解析我们的html5标签. 别人的解决方法,我copy过来了,是自己经过测试的. 第一种方法: <!--[if lt IE 9]> <script src="http:/

a标签内容在div中垂直居中,不兼容低版本浏览器

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head> <style>.box{width:100px;height:200px;background:orange;border:2px solid #ccc;display: table;}.box a{dis

轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换图片,无缝滚动和非无缝滚动两种效果) 页面源代码:index.html(以下注释自行切换,为了项目清晰,所以用了四个js文件,分别实现不同的效果) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c