onload

最新推荐文章于 2023-08-15 10:27:06 发布

dxm809

最新推荐文章于 2023-08-15 10:27:06 发布

阅读量1.3k

点赞数

分类专栏： JAVASCRIPT

本文链接：https://blog.youkuaiyun.com/dxm809/article/details/104874413

版权

JAVASCRIPT 专栏收录该内容

134 篇文章

订阅专栏

本文介绍了一个使用onload事件和鼠标悬停事件实现的动态网页效果案例。通过在页面加载完成后设置元素的mouseover和mouseout事件，改变元素大小和背景颜色。此案例展示了如何在网页中应用基本的JavaScript事件处理。

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

onload事件是整个页面加载完以后，执行的事件。注意，在onload里面为事件指定函数名称时候不可以加括号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#dv{
				width: 100px;
				height: 100px;
				background-color: grey;
			}
			
		</style>
		<script>	
			window.onload=function(){
				var dv = document.getElementById('dv');
				dv.onmouseover=togreen 
				dv.onmouseout=togrey
			}
			function togreen(){
				
				dv.style.height='200px';
				dv.style.width='200px';
				dv.style.backgroundColor='red';
			}
			function togrey(){
				
				dv.style.height='100px';
				dv.style.width='100px';
				dv.style.backgroundColor='grey';
			}
		</script>
	</head>
	
	<body>
		<div id='dv'>hello</div>
	</body>
</html>