recherche

Maison >interface Web >js tutoriel >JS implémente l'exécution du code une fois le chargement du document terminé_compétences javascript

JS implémente l'exécution du code une fois le chargement du document terminé_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:50:581250parcourir

Lors de l'exécution de certaines opérations, vous devez attendre que le document soit complètement chargé avant de l'exécuter, sinon des situations inattendues peuvent survenir. Jetons d'abord un coup d'œil à un exemple de code : 

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

L'intention initiale du code ci-dessus est de définir la couleur d'arrière-plan du div sur #639, mais cela n'obtient pas l'effet attendu, car le code est exécuté séquentiellement lorsque le document est chargé. le code pour définir la couleur d'arrière-plan est exécuté, n'a pas été chargé dans le div spécifié, donc l'instruction js n'a pas du tout obtenu l'objet. Le code est modifié comme suit :

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

Le code ci-dessus obtient l'effet attendu car le code est placé dans une fonction et cette fonction est utilisée comme gestionnaire d'événements pour l'événement window.onload. La condition pour déclencher l'événement window.onload est que le document actuel soit complètement chargé. Lorsque cet événement est déclenché, sa fonction de traitement d'événement sera exécutée de cette manière, car tous les documents ont été chargés, il n'y aura aucune situation où le. L'instruction js ne peut pas obtenir l'objet.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode jQuery pour obtenir un effet d'agrandissement d'image Taobao_jqueryArticle suivant：Méthode jQuery pour obtenir un effet d'agrandissement d'image Taobao_jquery

Articles Liés

Voir plus