DOM 属性操作

一、属性操作

　　getAttribute("")　　setAttribute("","")　　dataset

　　dataset的应用

<!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="wwq"
			data-name="魏文庆" data-email="wwq123@163.com" 
			data-mobile="13524543878">wwq</li>
		<li data-id="123457" data-account-name="cjf"
			data-name="蔡剑飞" data-email="cjf123@163.com" 
			data-mobile="13968789868">cjf</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;

				$('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';
			};

		}
		
	</script>
</body>
</html>

　　

posted @ 2015-12-19 18:01  myherodream  阅读(103)  评论(0)    收藏  举报