操作属性
对象.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>