自定义标签属性数据通过json对象解析得到所需数据方法

最新推荐文章于 2019-02-26 14:20:22 发布

原创最新推荐文章于 2019-02-26 14:20:22 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#json #自定义标签数据

web前端专栏收录该内容

25 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<div id="userInfo" class="userInfo" user-info='{ "name":"xq" , "age":23 , "job":"前端开发"}'></div>
		<script type="text/JavaScript">
			function getUserInfo(){
				var userInfoNode=document.getElementById('userInfo');
				var userInfo=userInfoNode.getAttribute('user-info');
				alert(typeof userInfo);//string,类型为字符串
				alert(userInfoNode.id);//原生属性，直接用node.id;非原生属性（自定义属性user-info）用node.getAttribute().user-info;
				var jsonUserInfo=JSON.parse(userInfo);//注意user-info的属性值的写法，必须按照JSON的格式，用双引号将属性引起来
				//var jsonUserInfo=eval("("+userInfo+")");//这种转换方式就不需要按照特定的格式，上面的可以，也可以写成user-info="{ name:'xq', age:23, job:'前端开发'}"
				//不过不推荐eval();安全性差。
				alert(typeof jsonUserInfo);//object,类型为对象
				alert(jsonUserInfo.job);//得到 前端开发
			}
			getUserInfo();
		</script>
	</body>
</html>