DOM小案例

最新推荐文章于 2022-08-05 02:31:30 发布

原创最新推荐文章于 2022-08-05 02:31:30 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM案例

javascript 专栏收录该内容

134 篇文章

订阅专栏

博客介绍了DOM小案例，包含图片切换以及显示和隐藏功能，这些案例属于前端开发中DOM操作的实际应用，能帮助开发者更好掌握相关技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM小案例

图片切换

<a href="youkuaiyun.com" 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>