JS實(shí)現(xiàn)文檔加載完成后執(zhí)行代碼
更新時(shí)間：2015年07月09日 10:06:09 投稿：hebedich
本文給大家講述的是使用javascript實(shí)現(xiàn)文檔加載完成后再執(zhí)行代碼的方法和示例，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
在執(zhí)行某些操作的時(shí)候，需要當(dāng)文檔完全加載完成之后再去執(zhí)行，否則可能出現(xiàn)意向不到的情況，先看一段代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>腳本之家</title>
<style type="text/css">
div{
width:200px;
height:200px;
}
</style>
<script type="text/javascript">
document.getElementById("mytest").style.backgroundColor="#639";
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
以上代碼的初衷是將div的背景顏色設(shè)置為#639，但是并未達(dá)到我們預(yù)期的效果，這是因?yàn)槲臋n加載的時(shí)候代碼是順序執(zhí)行的，當(dāng)執(zhí)行js的設(shè)置背景顏色代碼的時(shí)候，還沒有加載到指定的div，所以js語句根本沒有獲取到對(duì)象。代碼修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>腳本之家</title>
<style type="text/css">
div{
width:200px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("mytest").style.backgroundColor="#639";
}
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
以上代碼實(shí)現(xiàn)了預(yù)期的效果，這是因?yàn)閷⒋a放到了一個(gè)函數(shù)中，而此函數(shù)用作了window.onload事件的事件處理函數(shù)。window.onload事件觸發(fā)的條件是當(dāng)前文檔完全加載完成，當(dāng)此事件被觸發(fā)之后，就會(huì)執(zhí)行它的事件處理函數(shù)，這樣因?yàn)樗形臋n都已加載了，就不存在js語句無法獲得對(duì)象的情況了。
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
相關(guān)文章
js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
本文主要介紹了JavaScript中的堆棧與拷貝，能更好的幫助你理解JS的內(nèi)存機(jī)制，感興趣的同學(xué)，一定要認(rèn)真看下2021-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
JS 參數(shù)傳遞的實(shí)際應(yīng)用代碼分析
在項(xiàng)目中，有一個(gè)Ajax加載的區(qū)域，是一個(gè)Div標(biāo)簽，id為msg_box，這個(gè)控制鏈接包含在一個(gè)左側(cè)的導(dǎo)航中，當(dāng)從其他頁面鏈接到這個(gè)頁面時(shí)，該JS代碼就失效了。2009-09-09
這里之所以使用setTimeout()，因?yàn)榭梢詮氐谆厥债?dāng)前所有對(duì)象，防止變量之間的引用導(dǎo)致釋放失敗，可以當(dāng)作一個(gè)保障措施，按照道理來說，這里不會(huì)執(zhí)行了。2010-04-04
js實(shí)現(xiàn)正則匹配中文標(biāo)點(diǎn)符號(hào)的方法
這篇文章主要介紹了js實(shí)現(xiàn)正則匹配中文標(biāo)點(diǎn)符號(hào)的方法,涉及JavaScript正則匹配與判定的簡(jiǎn)單使用技巧,需要的朋友可以參考下2015-12-12
這篇文章主要為大家分享了關(guān)于javascript實(shí)現(xiàn)上周、上個(gè)月的處理方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
基于 Bootstrap Datetimepicker 聯(lián)動(dòng)
這篇文章主要介紹了基于bootstrap datetimepicker 聯(lián)動(dòng)效果,需要的朋友可以參考下2017-08-08
在項(xiàng)目中需要分析將一個(gè)有規(guī)則的字符串分割成一個(gè)字符串?dāng)?shù)組。2009-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手寫板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07