Rumah > Artikel > hujung hadapan web > JS melaksanakan pelaksanaan kod selepas pemuatan dokumen selesai_kemahiran javascript

JS melaksanakan pelaksanaan kod selepas pemuatan dokumen selesai_kemahiran javascript

WBOYasal: 2016-05-16 15:50:581221semak imbas

Apabila melakukan operasi tertentu, anda perlu menunggu sehingga dokumen dimuatkan sepenuhnya sebelum melaksanakan, jika tidak, situasi yang tidak dijangka mungkin berlaku. Mari kita lihat contoh kod dahulu:

<!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>

Niat asal kod di atas adalah untuk menetapkan warna latar belakang div kepada #639, tetapi ia tidak mencapai kesan yang kami jangkakan Ini kerana kod dilaksanakan secara berurutan apabila dokumen dimuatkan kod untuk menetapkan warna latar belakang dilaksanakan, , belum dimuatkan ke dalam div yang ditentukan, jadi pernyataan js tidak memperoleh objek sama sekali. Kod tersebut diubah suai seperti berikut:

<!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>

Kod di atas mencapai kesan yang diharapkan kerana kod diletakkan dalam fungsi, dan fungsi ini digunakan sebagai pengendali acara untuk acara window.onload. Syarat untuk mencetuskan peristiwa window.onload ialah dokumen semasa dimuatkan sepenuhnya Apabila peristiwa ini dicetuskan, fungsi pemprosesan acaranya akan dilaksanakan Dengan cara ini, kerana semua dokumen telah dimuatkan, tidak akan ada situasi di mana pernyataan js tidak boleh mendapatkan objek .

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：kaedah jQuery untuk mencapai effect_jquery pembesaran imej TaobaoArtikel seterusnya：kaedah jQuery untuk mencapai effect_jquery pembesaran imej Taobao

Artikel berkaitan

Lihat lagi