简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

JS实现文档加载完成后执行代码_javascript技巧

WBOY
發布： 2016-05-16 15:50:58
原創
1179 人瀏覽過

在执行某些操作的时候，需要当文档完全加载完成之后再去执行，否则可能出现意向不到的情况，先看一段代码实例:

<!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的背景颜色设置为#639，但是并未达到我们预期的效果，这是因为文档加载的时候代码是顺序执行的，当执行js的设置背景颜色代码的时候，还没有加载到指定的div，所以js语句根本没有获取到对象。代码修改如下:

<!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>
登入後複製

以上代码实现了预期的效果，这是因为将代码放到了一个函数中，而此函数用作了window.onload事件的事件处理函数。window.onload事件触发的条件是当前文档完全加载完成，当此事件被触发之后，就会执行它的事件处理函数，这样因为所有文档都已加载了，就不存在js语句无法获得对象的情况了。

以上所述就是本文的全部内容了，希望大家能够喜欢。

相關標籤：
JS实现文档加载完成后执行代码
來源：php.cn
上一篇：jQuery实现类似淘宝网图片放大效果的方法_jquery 下一篇：浅谈jQuery中setInterval()方法_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
為什麼在Sass樣式表中，我們應該使用@use來導入程式碼，而不是直接使用@import？ 我正在實施一個項目，根據我的了解，@use只會將程式碼匯入到我們使用@use的樣式表中，而不是任何其他樣式表。 sass文檔：@use載入的成員（變數、函數和混合）只在載入它們的樣...
來自於 2023-09-15 21:45:03
0
1
455
如何使用React/JSX在樣式載入完成之前等待React的載入？ 我一直遇到這個問題，在使用js/jsx/react時，我一直遇到這個問題，我的邏輯在頁面加載之前運行，因此，我一直遇到錯誤，以及什麼不是我的程式碼嘗試在頁面加載完成之前執行，從而導...
來自於 2023-09-01 00:24:34
0
1
192
網站使用者後台想增加一欄目，求解！ ！ ！ ！ 問題描述的也許不夠專業，請各位見諒！ ！ ！從網路上下載的一套織夢系統的網站源碼，在用戶後台欄想增加一欄《文章發布》，找了好久最後在某個資料夾裡面找到了名稱為menu.php的文件...
來自於 2020-03-15 11:16:46
0
0
810
javascript - vuejs頁面載入完成後執行函數 module.exports = { {程式碼...} }; 在這基礎上加一個頁面載入完成後執行的函數！我是小白，第二天接觸vuejs，希望大神指點一二
來自於 2017-06-21 10:12:36
0
3
764
python redis 多進程使用 {程式碼...} 根據文件寫了一個帶有連接池的redis client,然後產生一個實例全域使用。將一個實例，在多執行緒中共用測試過正常。但是多進程情況，測試失敗 {程式碼...}...
來自於 2017-06-08 11:02:09
0
1
849
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！