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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2050 天前的主题，其中的信息可能已经有所发展或是发生改变。

直接在页面上写<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

2019-04-13 21:50:02 +08:00 via Android

这个。。楼主有学过 js 吗？

Mutoo

2019-04-13 21:54:28 +08:00

在页面上直接写，会在 DOM 树边解释时边执行，此时的 DOM 树可能并不完整（#xxx 可能未被创建）。
而 window.onload 是一个事件回调函数，在 DOM 树被解析完成后触发执行。此时的 DOM 树是完整的（#xxx 已经创建）。

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

2019-04-13 21:56:30 +08:00 via Android

事件啊，那个＝前面是事件，当我脱下裤子再尿出来和直接尿出来的区别。大概好像这意思，你百度吧，我是做 seo 的，不懂代码。

belin520

2019-04-13 22:01:10 +08:00

window.onload 楼主按照英文字面意思理解即可解决你的疑问

belin520

2019-04-13 22:02:30 +08:00

@glouhao 额，很多论坛里面我只有 7-8 成把握的问题我都不敢回复别人，因为怕有 3 成几率错了而误导了别人

FEDT

2019-04-13 22:04:29 +08:00 via iPhone

查下文档有这么难吗

caomu

2019-04-13 23:07:39 +08:00 via Android

借问一下，把 script 放在 body 最下面可以吗？

shuAS

2019-04-13 23:40:30 +08:00

@caomu 可以，此时页面 DOM 已经加载完毕

xuAN111

2019-04-14 09:53:07 +08:00

一个是当浏览器解析到这块代码的时候立刻执行，
另一个是等网页资源全部加载完成后执行，比如你网页有比较多的图片，那么图片没加载完成，js 代码也不会执行，只有全部加载完成后才会执行。

botian

2019-04-14 11:00:27 +08:00

。。。。建议楼主去好好学学 javascript 吧，这种问题专门来发帖的时间，看文档都看会了

sandersyao

2019-04-22 22:26:50 +08:00

同行还是那么刻薄，建议楼主可以把带这个 id 属性的标签写在这个 script 标签后面看看效果

galikeoy

2019-04-29 17:02:18 +08:00

@sandersyao #12 不是这么刻薄，而是这问题太基础了百度一分钟的事