为什么按钮没有效果！！！！-慕课网

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

来源：4-1 编程挑战

唯尔半截湘妃

2016-05-11 20:35

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

<head>

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

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>

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>

</body>

</html>

写回答关注

3回答

唯尔半截湘妃

2016-05-12 20:36:35

谢谢！

0 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 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>
的后边。

1 0

唯尔半截湘妃

但是我之前写了一个和这个差不多的例子，<script>标签是放在<head></head>里，运行是行的。为什么这次只能放在Button之后了

2016-05-11 22:56:25

共 1 条回复 >

JavaScript入门篇

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

739817 学习 · 9566 问题

查看课程

相似问题

为什么按按钮没有效果

回答 3

回答 3

回答 2

回答 1

回答 2