网易微专业-DOM编程艺术 03属性操作
2017-04-05 本文已影响12人
Marks
1、HTML attribute → DOM property
2、properity accessor
读
Paste_Image.png
类型
✘通用性-名字异常；✘扩展性；✔实用对象
3、g/setAttribute
读
写
类型
✘仅字符；✔通用性
4、dataset
dataset
dataset一般用来做自定义属性
鼠标放在左侧名字上出现对应信息。
Q1:var lis=document.getElementByTagName("li"); lis值？？
Q2:onmouseenter ??
Q3:event=event || window.event; ??
Q4:var user = event.target || event.srcElement; ??
Q5:li{cursor:default;} 默认值有必要写么？？
Q6:border-collapse
Q7:caption{border-bottom;} ？？
Q8:<div id="card" style="display=none"> ？？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pratice</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="wei"
data-email="wei123@163.com" data-mobile="13524543878">wwq</li>
<li data-id="123457" data-account-name="cjf" data-name="cai"
data-email="cai123@163.com" data-mobile="13524543834">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>
晚上尝试自己写(CSS未写），出现问题有：
①data-name="name"等→data-name="wwq",直接写实参
②function $id(id) → function $(id)
③var user = event.target || strElement; → var user = event.target || event.srcElement; 【srcElement??
④var data = data.dataset; →var data = user.dataset;
⑤var onmouseenter → li.onmouseenter
Q1:legend ??
Q2:fieldset ??
Q3:label for=" "中for ??
Q4:form action="" 中action??
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body, button, input, legend{margin: 0;padding: 0;font: 16px "微软雅黑";}
.m-form{margin: 150px auto 0;width: 325px;border: 1px solid #ddd;}
.m-form legend{width: 100%;line-height: 30px;text-indent: 1em;color: #fff;background-color: #2d2d2d;}
.m-form fieldset{border: none;padding: 20px;}
.m-form div{margin: 20px;}
.m-form .u-txt{width: 160px;padding: 3px;}
button{width: 100%;height: 30px;color: #fff;border: 1px solid #ddd;cursor: pointer;background-color: #2d7dca;}
.disabled{cursor: default;background-color: #ddd;}
</style>
</head>
<body>
<form action="" class="m-form">
<legend>手机号码登录</legend>
<fieldset>
<div>
<label for="userName">用户名：</label>
<input id="userName" type="text" class="u-txt">
</div>
<div>
<label for="password">密 码：</label>
<input id="password" type="password" class="u-txt">
</div>
<div><button id="login">登 录</button></div>
</fieldset>
</form>
<script>
var button = document.getElementById('login');
button.onclick = function(){
button.disabled = true;
button.setAttribute('class', 'disabled');
};
</script>
</body>
</html>```
