操作属性
对象.setAttribute('属性名','值'); - 添加属性
对象.getAttribute('属性名'); - 获取属性值,如无此属性,那么返回null
对象.removeAttribute('属性名'); - 移除属性
例如:
1 head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 </head> 5 <body> 6 7 8 <input type="button" value="按钮" id="btn" /> 9 10 11 </body> 12 </html> 13 <script type="text/javascript"> 14 15 16 var zw_btn = document.getElementById('btn'); 17 zw_btn.onclick = function () { 18 zw_btn.setAttribute('disabled','disabled'); 19 } 20 21 22 </script>
disabled="disabled" 代表禁用
彩虹导航
<!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 { float: left; 100px; height: 30px; margin-right: 10px; } </style> </head> <body> <!--3、有5个导航菜单,颜色分别是红黄蓝绿紫 鼠标移入变为灰色,移除变为之前的颜色 点击变为黑色,同一时间只能有一个黑色--> <div class="div1" style="background-color: red;" ss="red"></div> <div class="div1" style="background-color: yellow;"ss="yellow"></div> <div class="div1" style="background-color: blue;"ss="blue"></div> <div class="div1" style="background-color: green;"ss="green"></div> <div class="div1" style="background-color: purple;"ss="purple"></div> </body> </html> <script type="text/javascript"> var div = document.getElementsByClassName('div1'); for (var i = 0; i < div.length; i++) { //索引 div[i].index = i; //点击 div[i].onclick = function () { for (var j = 0; j < div.length; j++) { // div[j].getAttribute('ss')是求取一个属性的值 我们把这个值定位和原来颜色一样的值 div[j].style.backgroundColor = div[j].getAttribute('ss'); } div[this.index].style.backgroundColor = "black"; } //移入 div[i].onmouseover = function () { if (div[this.index].style.backgroundColor != "black") div[this.index].style.backgroundColor = "gray"; } //移出 div[i].onmouseout = function () { if (div[this.index].style.backgroundColor == "gray") div[this.index].style.backgroundColor = div[this.index].getAttribute('ss'); } } </script>