V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lisisi
V2EX  ›  JavaScript

直接在页面上写<script>...</script>和用 window.onload = function(),有什么区别吗?

  •  
  •   lisisi · 2019-04-13 21:45:30 +08:00 · 4462 次点击
    这是一个创建于 2081 天前的主题,其中的信息可能已经有所发展或是发生改变。

    直接在页面上写<script>...</script>

    <script type="text/javascript">
        document.getElementById('xxx').style.color="#ff0000";
    </script>
    

    和用 window.onload = function() 有区别吗?

    <script>
        window.onload=function(){
        document.getElementById('xxx').style.color="#ff0000";
        }
    </script>
    
    13 条回复    2019-04-29 17:02:18 +08:00
    dobelee
        1
    dobelee  
       2019-04-13 21:50:02 +08:00 via Android
    这个。。楼主有学过 js 吗?
    Mutoo
        2
    Mutoo  
       2019-04-13 21:54:28 +08:00
    在页面上直接写,会在 DOM 树边解释时边执行,此时的 DOM 树可能并不完整(#xxx 可能未被创建)。
    而 window.onload 是一个事件回调函数,在 DOM 树被解析完成后触发执行。此时的 DOM 树是完整的(#xxx 已经创建)。
    xupefei
        3
    xupefei  
       2019-04-13 21:55:35 +08:00
    onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).

    第一种写法在执行的时候 xxx 元素可能还没加载出来。
    glouhao
        4
    glouhao  
       2019-04-13 21:56:30 +08:00 via Android
    事件啊, 那个=前面是事件,当我脱下裤子再尿出来和直接尿出来的区别。大概好像这意思,你百度吧,我是做 seo 的,不懂代码。
    belin520
        5
    belin520  
       2019-04-13 22:01:10 +08:00
    window.onload 楼主按照英文字面意思理解即可解决你的疑问
    belin520
        6
    belin520  
       2019-04-13 22:02:30 +08:00
    @glouhao 额,很多论坛里面我只有 7-8 成把握的问题我都不敢回复别人,因为怕有 3 成几率错了而误导了别人
    FEDT
        7
    FEDT  
       2019-04-13 22:04:29 +08:00 via iPhone
    查下文档有这么难吗
    caomu
        8
    caomu  
       2019-04-13 23:07:39 +08:00 via Android
    借问一下,把 script 放在 body 最下面可以吗?
    shuAS
        9
    shuAS  
       2019-04-13 23:40:30 +08:00
    @caomu 可以,此时页面 DOM 已经加载完毕
    xuAN111
        10
    xuAN111  
       2019-04-14 09:53:07 +08:00
    一个是当浏览器解析到这块代码的时候立刻执行,
    另一个是等网页资源全部加载完成后执行,比如你网页有比较多的图片,那么图片没加载完成,js 代码也不会执行,只有全部加载完成后才会执行。
    botian
        11
    botian  
       2019-04-14 11:00:27 +08:00
    。。。。建议楼主去好好学学 javascript 吧,这种问题专门来发帖的时间,看文档都看会了
    sandersyao
        12
    sandersyao  
       2019-04-22 22:26:50 +08:00
    同行还是那么刻薄,建议楼主可以把带这个 id 属性的标签写在这个 script 标签后面看看效果
    galikeoy
        13
    galikeoy  
       2019-04-29 17:02:18 +08:00
    @sandersyao #12 不是这么刻薄,而是这问题太基础了 百度一分钟的事
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1009 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:43 · PVG 04:43 · LAX 12:43 · JFK 15:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.