1. 程式人生 > >Java Script之Window.onload()

Java Script之Window.onload()

    Window.onload()是當頁面載入完成後執行的操作。當js程式碼需要獲取頁面中的元素的時候,如果這script放在元素的前面,那就需要加window.onload,如果script是放在了元素的後面,那就不需要加window.onload。

    例項程式碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>例項1</title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
		<script type="text/javascript">
			/*當頁面載入完成後執行的操作  當js程式碼需要獲取頁面中的元素的時候,
			  如果這script放在元素的前面,那就需要加window.onload,如果script是放在了元素的後面,
			  那就不需要加window.onload
			*/
			window.onload=function(){
				document.getElementById("btn").onclick=function(){
				//點選按鈕,按鈕變紅色
				document.getElementById("btn").style.background='red';
				//修改div的寬高
				document.getElementById("box").style.width='50px';
				document.getElementById("box").style.height='50px';
			}
			}
		</script>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="按鈕" />
		<div id="box">
			
		</div>
		<!--<script type="text/javascript">
			document.getElementById("btn").onclick=function(){
				//點選按鈕,按鈕變紅色
				document.getElementById("btn").style.background='red';
				//修改div的寬高
				document.getElementById("box").style.width='50px';
				document.getElementById("box").style.height='50px';
			}
		</script>-->
	</body>
</html>