css面试点-script标签写在body和head中的区别

最新推荐文章于 2023-11-30 23:06:49 发布

wflynn

最新推荐文章于 2023-11-30 23:06:49 发布

阅读量1.6k

点赞数 3

分类专栏： css 面试知识点

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/103119063

版权

面试知识点同时被 2 个专栏收录

169 篇文章 7 订阅

订阅专栏

css

24 篇文章 0 订阅

订阅专栏

javascript代码写在<head>里面：

由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执行的自定义函数，立即执行的语句则很可能会出错（视浏览器而定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" rel="stylesheet">
        body {
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        const body = document.getElementsByTagName('body')[0]
        body.style.backgroundColor = 'red'
    </script>
</head>
<body>

</body>
</html>

执行上述代码会报错：

页面颜色是蓝色，因为此时body标签并未加载。

解决方法：使用 window.onload 页面加载完毕后立刻执行

<script type="text/javascript">
    window.onload = function () {
        const hOne = document.getElementsByTagName('h1')[0]
        hOne.style.color = 'red'
    }
</script>

javascript代码写在<body>里面：

这里可以放函数也可以放立即执行的语句，但是如果需要和网页元素互动的（比如获取某个标签的值或者给某个标签赋值）， Javascript 代码务必在标签的后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" rel="stylesheet">
        body {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    window.onload
    const body = document.getElementsByTagName('body')[0]
    body.style.backgroundColor = 'red'
</script>
</body>
</html>

body 标签已加载，页面变成红色背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" rel="stylesheet">
        body {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload
        const hOne = document.getElementsByTagName('h1')[0]
        hOne.style.color = 'red'
    </script>
    <h1>我是文字</h1>
</body>
</html>

会报错：

因为执行 body 的 script 标签的内容时h1标签并未渲染。

将 script 代码放到 h1 标签之后，或者直接放到 </body> 标签下面

<h1>我是文字</h1>
<script type="text/javascript">
    const hOne = document.getElementsByTagName('h1')[0]
    hOne.style.color = 'red'
</script>

javascript代码写在</body>下面：

这时候整个网页已经加载完毕了，所以这里最适合放需要立即执行的命令，而自定义函数之类的则不适合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" rel="stylesheet">
        body {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <h1>我是文字</h1>
</body>
<script type="text/javascript">
    window.onload
    const hOne = document.getElementsByTagName('h1')[0]
    hOne.style.color = 'red'
</script>
</html>

script 放置位置的原则页面效果实现类的 js 应该放在 body 之前，动作，交互，事件驱动，需要访问 dom 属性的 js 都可以放在body之后。

wflynn

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
css面试点-script标签写在body和head中的区别

javascript代码写在<head>里面：由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执行的自定义函数，立即执行的语句则很可能会出错（视浏览器而定）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit...
复制链接

扫一扫