zoukankan      html  css  js  c++  java
  • window.onload

      网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式:


      一.将脚本代码放在网页的底端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。
      二.通过window.onload来执行脚本代码。


      第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个良好的选择。window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。先看一段代码实例:

    <!DOCTYPE html>   
    <html>   
    <head>   
    <meta charset=" utf-8">   
    <meta name="author" content="http://www.softwhy.com/" /> 
    <title>window.onload用法</title>
    <style type="text/css">
    #bg{
      100px;
      height:100px;
      border:2px solid red;
    }
    </style>
    <script type="text/javascript">
    document.getElementById("bg").style.backgroundColor="#F90";
    </script>
    </head>
    <body>
      <div id="bg"></div>
    </body>
    </html>

      

      以上代码的初衷是向将div的背景颜色设置为#F90,但是并没有实现此效果,这是因为代码是顺序执行的,当执行到document.getElementById("#bg").style.backgroundColor="#F90"这一句的时候,还没有加载到此div对象,所以设置也就不能够成功。代码修改如下:

    <!DOCTYPE html>   
    <html>   
    <head>   
    <meta charset=" utf-8">   
    <meta name="author" content="http://www.softwhy.com/" /> 
    <title>位置高度div垂直居中-蚂蚁部落</title>
    <style type="text/css">
    #bg{
      100px;
      height:100px;
      border:2px solid red;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
      document.getElementById("bg").style.backgroundColor="#F90";
    }
    </script>
    </head>
    <body>
      <div id="bg"></div>
    </body>
    </html>

      

      以上代码实现了将div背景颜色设置为#F90的目的。原因就是讲设置背景颜色的代码放置在window.onload的事件处理函数中,只有当文档加载完成后,才会执行事件处理函数,也才会执行设置背景颜色的脚本代码。

  • 相关阅读:
    jquery遍历table的tr获取td的值
    Java判断文件、文件夹是否存在
    项目搭建系列之三:SpringMVC框架下使用Ehcache对象、数据缓存
    J2EE课程设计:在线书店管理系统
    项目搭建系列之二:SpringMVC框架下配置MyBatis
    使用Git(msysgit)和TortoiseGit上传代码到GitHub
    安卓课程设计:微课表
    项目搭建系列之一:使用Maven搭建SpringMVC项目
    常用markdown语法
    [转]优秀程序员应该做的几件事
  • 原文地址:https://www.cnblogs.com/lulin1/p/8087412.html
Copyright © 2011-2022 走看看