JavaScript window.onload的做用

時間 2019-12-05

標籤 javascript window.onload window onload 欄目 JavaScript 简体版

原文原文鏈接

做用：

確保JavaScript腳本在文檔加載完成以後再執行，這樣避免了加載未完成就執行腳本，而沒法獲取對象的狀況。

爲了便於理解，咱們作如下實驗：html

實驗一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window.onload用法</title>
<style>  
    #box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;     
    }
</style>
<script>
    document.getElementById("box").style.backgroundColor = "skyblue";
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

實驗二：函數

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window.onload用法</title>
<style>  
    #box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;     
    }
</style>
<script>
    window.onload = function() {
    document.getElementById("box").style.backgroundColor = "skyblue";
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

咱們的目的是給盒子box加上背景顏色，
結果實驗一失敗，實驗二成功了。
緣由就在於
代碼是按照順序執行的，
當運行到document.getElementById("box").style.backgroundColor = "skyblue";
這句時，div對象還將來得及加載，於是設置失效。
而實驗二將該腳本放在了window.onload的事件處理函數中，
保證了文檔加載完成以後再執行。ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。