为什么按钮没有效果！！！！

源自：4-1 编程挑战

为什么按钮没有效果！！！！

<!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>

<style type="text/css">

body{margin:0;padding:0;}

.song1{ width:200px; font:16px "微软雅黑",sans-serif; background:#CF6; margin:20px auto;}

.song2{ width:200px; font:16px "微软雅黑",sans-serif; background:#CCC; margin:50px auto; padding:20px;}

.btn{margin:0 auto; width:200px;}

</style>

<script type="text/javascript">

var c=document.getElementById("song");

//隐藏

function btnNone()

{

c.style.display="none";

}

//显示

function btnShow()

{

c.style.display="block";

}

//更换css样式

function btnClass()

{

c.className="song2";

}

//增加

function btnAdd()

{

}

//去除所有的js样式

function btnRem()

{

c.removeAttribute("style");

}

</script>

</head>

<body>

<div id="song" class="song1">哀怨断肠》，胡伟立的《市集》、《笑傲江湖曲（琴箫合奏）》，麦振鸿的《景天——护甲》、《雪见——仙凡之旅》、《莫失莫忘》、《长留山》、《痴颜》、《只相信你（不可说）》、《疤痕》</div>

<br/>

<hr/>

<div class="btn">

<input type="button" value="隐藏" onclick="btnNone()"/>

<input type="button" value="显示" onclick="btnShow()"/>

<input type="button" value="换装" onclick="btnClass()"/>

<input type="button" value="增加" onclick="btnAdd()"/>

<input type="button" value="恢复出厂设置" onclick="btnRem()"/>

</div>

</body>

</html>

提问者：唯尔半截湘妃 2016-05-11 20:35

个回答

唯尔半截湘妃

2016-05-12 20:36:35

谢谢！

0
不快逆流

2016-05-12 17:29:32

html文档是自上而下加载的，加载到一个节点就渲染一个，加载到css、js文件就执行。所以有时候会看到网页上面已经有内容，底部还是空白。或者网速慢的时候，会看到页面没有样式。以你的代码来说，如果js代码在前，节点<div id=song>在后，则，执行js代码的时候，网页中还不存在，所以会得到c为nul或obj2为空集合。
```
<script type="text/javascript">
var c=document.getElementById("song");
alert(c);//弹出null
<script>
<div  id="song" class="song1">
hello
</div>
```
而如果这样
```
<div  id="song" class="song1">
hello
</div>
<script type="text/javascript">
var c=document.getElementById("song");
alert(c);//弹出object HTMLDivElement
<script>
```
与要获取id的位置有关，而和在Button的前后没有关系

0
不快逆流

2016-05-11 21:27:27

与<script>标签的位置有关，var c=document.getElementById("song");只能获取到该代码以前的标签。你可以把<script>......</script>部分放到
<div class="btn">
<input type="button" value="隐藏" onclick="btnNone()"/>
<input type="button" value="显示" onclick="btnShow()"/>
<input type="button" value="换装" onclick="btnClass()"/>
<input type="button" value="增加" onclick="btnAdd()"/>
<input type="button" value="恢复出厂设置" onclick="btnRem()"/>
</div>
的后边。

0