按键切换DIV

最新推荐文章于 2024-04-11 05:37:43 发布

那就可爱多一点点

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量472

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37241934/article/details/82933445

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red;}
</style>
<script>
/*在此定义一个函数setColor，实现参数调用，在按钮调用中使用不同参数，实现不同功能*/
function setColor(a)
{
	var backcolor = document.getElementById("div1");
	
	if(a=="yellow"){
		backcolor.style.background="yellow";
	}
	if(a=="black"){
		backcolor.style.background="black";
	}
	if(a=="green"){
		backcolor.style.background="green";
	}
}
</script>
</head>

<body>
<input type="button" value="变绿" onclick="setColor('green');" />
<input type="button" value="变黄" onclick="setColor('yellow');" />
<input type="button" value="变黑" onclick="setColor('black');" />
<div id="div1">
</div>
</body>
</html>

那就可爱多一点点

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
按键切换DIV

&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;style&gt;#div1 {width:200px; height:200px; background:red;}&lt;/style
复制链接

扫一扫