script的安放位置

来源:3-4 改变 HTML 样式

qq_无垠瀚海_04069334

2016-11-06 09:44

为什么我把script放在head里面就没有效果啊,只有把script放在body里面才有那些效果。

写回答 关注

3回答

  • 慕勒6241362
    2016-11-06 16:00:37

    document.getElementById("con")涉及到 DOM 操作,script 放在 <head> 标签里执行时,没有找到对应的 DOM 对象可以操作,当然就失效了。

    把script放在<head>元素中,就必须等到 js 代码被执行完以后才能开始呈现页面内容,这会造成页面出现延迟,所以一般都把 js 代码放在<body>中页面内容的后面。

  • qq_无垠瀚海_04069334
    2016-11-06 10:56:33

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <script type="text/javascript">

    var mychar=document.getElementById("con");

    mychar.style.color="red";

    mychar.style.backgroundColor="blue";

    mychar.style.fontSize="20px";

    mychar.style.width="300px";

    </script>

    </head>


    <body>

    <h1  id="con">I love JavaScript</h1>

    <p>JavaScript使网页显示动态效果并实现与用户交互功能。</p>


    </body>

    </html>

    按照这个代码完全没有效果;

    按照下面的代码就有效果:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>


    </head>


    <body>

    <h1  id="con">I love JavaScript</h1>

    <p>JavaScript使网页显示动态效果并实现与用户交互功能。</p>

    <script type="text/javascript">

    var mychar=document.getElementById("con");

    mychar.style.color="red";

    mychar.style.backgroundColor="blue";

    mychar.style.fontSize="20px";

    mychar.style.width="300px";

    </script>

    </body>

    </html>


  • qq_明了_04341418
    2016-11-06 10:27:17

    有没有用script的结尾


JavaScript入门篇

JavaScript做为一名Web工程师的必备技术,本教程让您快速入门

739816 学习 · 9566 问题

查看课程

相似问题