javasript改变HTML样式放在head标签实现不了的问题-慕课网

首页课程实战体系课手记专栏慕课教程

javasript改变HTML样式放在head标签实现不了的问题

来源：3-5 显示和隐藏（display属性）

疯子亚当

2016-05-08 13:58

应该是跟文档是从由上到下读取的问题那么为什么放在head标签的时候样式不能实现而隐藏显示按钮却可以实现呢

写回答关注

1回答

Alrene_: 2016-05-08 14:31:54

已采纳

1、主要是先加载和后加载的区别。

如果JavaScript脚本写在head标签里面，那么需要用window.onload起到一个延迟加载的作用。

2、实例：你要写在head里实现可以这样写。举个例子：

a:不能实现

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
 <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="blue";
    mychar.style.width="150px";
  </script>
</head>
<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
</body>
</html>

b：实现了

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
 <script type="text/javascript">
 function a(){
    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="blue";
    mychar.style.width="150px";
}
  </script>
</head>
<body onload=a()>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
</body>
</html>

0 3

JavaScript入门篇

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

739818 学习 · 9566 问题

查看课程

相似问题

改变html样式的JS代码写在head标签中为何不生效

回答 5

用JavaScript改变HTML样式问题

回答 1

改变HTML样式

回答 2

改变HTML样式

回答 2

改变HTML样式

回答 4

打开慕课网App查看更多内容