文章目录
- 106 a的索引问题
- 107 使用DOM操作CSS
- 108 读取元素当前的样式
- 109 getStyle()
- 110 其他样式操作的属性
- 滚动条练习
106 a的索引问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <script type="text/javascript"> window.onload = function(){var allA = document.getElementsByTagName("a");for(var i = 0; i < allA.length; i++){alert("for循环正在执行" + i);allA[i].onclick = function(){alert("响应函数正在执行" + i); console.log(allA[i] == this); return false; };}}; </script>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div>
</body>
</html>
107 使用DOM操作CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <style type="text/css">#box1 {width: 200px;height: 200px;background-color: red;<!--background-color: red !important;-->}</style><script type="text/javascript"> window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow"; };var btn02 = document.getElementById("btn02");btn02.onclick = function(){alert(box1.style.width);};};</script>
</head>
<body><button id="btn01">点一下1</button><button id="btn02">点一下2</button><div id="box1"></div>
</body>
</html>
108 读取元素当前的样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <style type="text/css">#box1 {width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript"> window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){alert(box1.currentStyle.width);alert(getStyle(box1, "width"));};};function getStyle(obj, name){}</script>
</head>
<body><button id="btn01">点一下</button><div id="box1" style="width: 200px; background-color: red;"></div>
</body>
</html>
109 getStyle()
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <style type="text/css">#box1 {width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript"> window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){var v = getStyle(box1, "width");alert(v);};};function getStyle(obj, name){ if(window.getComputedStyle){return getComputedStyle(obj, null)[name];}else{return obj.currentStyle[name];} }</script>
</head>
<body><button id="btn01">点一下</button><div id="box1" style="width: 200px; background-color: red;"></div>
</body>
</html>
110 其他样式操作的属性
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;padding: 10px;border: 10px solid yellow;}# box2 {padding: 100px;background-color: #bfa;}# box4 {width: 200px;height: 300px;background-color: #bfa;overflow: auto;}# box5 {width: 150px;height: 600px;background-color: yellow;}</style><script type="text/javascript"> window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");var box4 = document.getElementById("box4");btn01.onclick = function(){alert(box1.clientWidth);alert(box1.clientHeight);alert(box1.offsetWidth);var op = box1.offsetParent;alert(op.id); alert(box1.offsetLeft); alert(box4.scrollHeight); alert(box4.scrollLeft);alert(box4.scrollTop);alert(box4.scrollHeight); alert(box4.scrollHeight - box4.scrollTop); alert(box4.scrollHeight - box4.scrollTop); };};</script>
</head>
<body><button id="btn01">点一下</button><br><div id="box4"><div id="box5"></div></div><br><div id="box3" style="position: relative;"><div id="box2" style="position: relative;"><div id="box1"></div></div></div>
</body>
</html>
滚动条练习
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <style type="text/css">#info {width: 300px;height: 500px;background-color: #bfa;overflow: auto;}</style><script type="text/javascript"> window.onload = function(){var info = document.getElementById("info");var inputs = document.getElementsByTagName("input");info.onscroll = function(){if(info.scrollHeight - info.scrollTop == info.clientHeight){inputs[0].disabled = false;inputs[1].disabled = false;}};};</script>
</head>
<body><h3>欢迎亲爱的用户注册</h3><p id="info">请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议，请阅读以下协议</p><input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守<input type="submit" value="注册" disabled="disabled" />
</body>
</html>
