JS——操作属性
操作属性：
对象.setAttribute('属性名','值'); - 添加属性
对象.getAttribute('属性名'); - 获取属性值，如无此属性，那么返回null
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .div1 { width: 100px; height: 50px; float: left; margin-right: 10px; } </style> </head> <body> <div class="div1" dd="1"></div> <div class="div1" dd="1"></div> <div class="div1" dd="0"></div> <div class="div1" dd="0"></div> <div class="div1"></div> <div class="div1"></div> </body> </html> <script type="text/javascript"> var aa = document.getElementsByClassName("div1"); for (var i = 0; i < aa.length; i++) { if (aa[i].getAttribute("dd") == "1") aa[i].style.backgroundColor = "green"; else if (aa[i].getAttribute("dd") == "0") aa[i].style.backgroundColor = "yellow"; else aa[i].style.backgroundColor = "red"; } </script>
对象.removeAttribute('属性名'); - 移除属性
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <input type="button" value="按钮111" id="dd1" /> <input type="button" value="按钮222" id="dd2" /> </body> </html> <script type="text/javascript"> var aaa = document.getElementById("dd1"); var bbb = document.getElementById("dd2"); //按钮111的点击事件 aaa.onclick = function () { //按钮111添加一个属性不可用 this.setAttribute("disabled", "disabled"); //获取aaa中属性value的值 var ccc = this.getAttribute("value"); alert(ccc); } //bbb的点击事件 bbb.onclick = function () { //移除aaa的disabled属性 aaa.removeAttribute("disabled"); } </script>
2.验证5+5=？
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> 5+5= <input type="text" id="dd1" data="10" /> <input type="button" id="dd2" value="验证"/> </body> </html> <script type="text/javascript"> var aaa = document.getElementById("dd1"); var bbb = document.getElementById("dd2"); //按钮111的点击事件 //bbb的点击事件 bbb.onclick = function () { var txt = aaa.getAttribute("data"); if (txt == aaa.value) alert("正确"); else alert("笨蛋"); } </script>
3.彩虹导航栏，移入变为灰色，移除变为原来的颜色。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .div1 { width: 100px; height: 50px; float: left; margin-right: 10px; } </style> </head> <body> <div class="div1" style="background-color: red" dd="red"></div> <div class="div1" style="background-color: blue" dd="blue"></div> <div class="div1" style="background-color: green" dd="green"></div> <div class="div1" style="background-color: pink" dd="pink"></div> <div class="div1" style="background-color: purple" dd="purple"></div> <div class="div1" style="background-color: yellow" dd="yellow"></div> </body> </html> <script type="text/javascript"> var aaa = document.getElementsByClassName("div1"); //中间变量存颜色 var color; for (var i = 0; i < aaa.length; i++) { //鼠标移入事件 aaa[i].onmouseover = function () { color = this.style.backgroundColor; this.style.backgroundColor = "gray"; } //鼠标移除事件 aaa[i].onmouseout = function () { this.style.backgroundColor = color; } //鼠标点击事件 } </script>
定时器：
window.setTimeout(function(){},间隔时间毫秒);
- 定时炸弹，延迟执行，只执行一次
window.setInterval(function(){},间隔的时间毫秒);
- 无限循环，每一次循环有间隔时间，一般不要小于20毫秒
- 它是有返回值的，可以用一个变量来接收这个定时器对象
window.clearInterval(要关闭的定时器对象);
一旦执行这句代码，会立刻停止此定时器对象的执行
对象.offsetWidth
