                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

代码放在head里面没有效果

我把js代码放在了head里面，document.write("开启JS之旅");这个可以打印出来，但document.getElementById("p1").style.color="blue";没起作用，想问下如何解决，期待大神们回答。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<title>插入js代码</title>
<script type="text/javascript">
window.onload=function(){
document.write("开启JS之旅!");
document.getElementById("p1").style.color="blue";
}
</script>
</head>
<body>
<p id="p1">我要改变颜色</p>
</body>
</html>

听羽

2016-09-13

源自：JavaScript入门篇 1-2

关注问题我要回答

1050

操作

收起

2 回答

dingchao 回答被采纳 +3 积分
2016-09-13

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>插入js代码</title>
       <script type="text/javascript">
   
        document.write("开启JS之旅!");
     
       window.onload=function(){
        document.getElementById('p1').style.color="blue";
      }

   </script>
</head>
<body>
<p id="p1">我要改变颜色</p> 
</body>
</html>

当你用window.onload再document.write给页面赋值的时候，你已经改变了整个body的内容，p标签中的内容已经被代替了，已经找不到p标签了。正解如上