DOM小案例

DOM小案例

1. 图片切换

<a href="csdn.net" style = "marin:10px; display: block;" onclick="fn()">切换</a>
<img src = "images/1.jpg" width = "400px" id="img">
<script>
//需求：点击a链接，img图片切换（行内式）
//步骤：
//1. 获取事件源和相关元素
var a = document.getElementsByTagName("a");
var img = document.getElementById("img");
//2. 绑定事件
function fn(){
	//3. 书写事件驱动程序
	img.src = "images/img2.jpg";
	return false;//return false的目的是禁止a标签跳转
}
</script>

2.显示和隐藏

<button style="margin:0px;" id="btn">隐藏</button>
<div style="width:200px;height:200px;">吃得苦中苦，方得人上人</div>
<script>
//需求：通过点击按钮实现div的显示和隐藏
var btn=document.getElementById("btn");
var div = document.getElementsByTagName("div")[0];
btn.onclick = function(){
	if(this.innerHTML=="隐藏"){
		this.innerHTML = "显示";
		div.style.display = "none";
	}else{
		this.innerHTML = "隐藏";
		div.style.display = "block";
	}
}
</script>