例:点击按钮禁用文本框
<body>
<input type="button" value="禁用文本框" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
//先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function(){
//根据id获取文本框,设置disabled属性
document.getElementById("txt").disabled=true;
};
</script>
</body>
例:点击按钮修改列表背景颜色
<input type="button" value="变色" id="btn"/>
<ul id="uu">
<li>旅行团</li>
<li>新裤子</li>
<li>宇宙人</li>
<li>盘尼西林</li>
<li>反光镜</li>
</ul>
<script>
document.getElementById("btn").onclick=function(){
document.getElementById("uu").style.backgroundColor="yellow";
};
</script>
例:阻止超链接默认跳转
<body>
<a href="http://www.baidu.com" id="ak">Baidu</a>
<script>
document.getElementById("ak").onclick=function(){
return false;
};
</script>
</body>
例:点击小图显示大图
<body>
<a href="images/1.jpg" id="ak"><img src="images/1-small.jpg" alt=""></a>
<img src="" alt="" id="big">
<script src="common.js"></script> //封装函数,见上篇文章
<script>
//点击小图,下面显示大图
//点击超链接
my$("ak").onclick=function(){
my$("big").src=this.href;
return false;
};
</script>
</body>
例:列表隔行变色
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
<li>盛夏光年</li>
<li>成名在望</li>
<li>转眼</li>
<li>如烟</li>
<li>终于结束的起点</li>
<li>任意门</li>
<li>后来的我们</li>
<li>少年他的奇幻漂流</li>
</ul>
<script>
//奇红偶黄
//点击按钮
document.getElementById("btn").onclick=function (){
//获取所有的li标签
var list=document.getElementById("uu").getElementsByTagName("li");
for(var i=0; i<list.length; i++){
if(i%2==0){
//偶数
list[i].style.backgroundColor="red";
}else{
//奇数
list[i].style.backgroundColor="yellow";
}
}
};
</script>
</body>
例:列表高亮显示
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul>
<li>盛夏光年</li>
<li>成名在望</li>
<li>转眼</li>
<li>如烟</li>
<li>终于结束的起点</li>
<li>任意门</li>
<li>后来的我们</li>
<li>少年他的奇幻漂流</li>
</ul>
<script>
//鼠标进入和鼠标离开两个事件
//获取所有li标签
var list=document.getElementsByTagName("li");
for(var i=0; i<list.length; i++){
//为li注册鼠标进入事件
list[i].onmouseover=function(){
this.style.backgroundColor="yellow";
};
//为li注册鼠标离开事件
list[i].onmouseout=function(){
//恢复到这个标签默认的颜色
this.style.backgroundColor="";
};
}
</script>
</body>