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

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

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

唯尔半截湘妃

2016-05-11

源自：JavaScript入门篇 4-1

关注问题我要回答

912

操作

收起

3 回答

唯尔半截湘妃提问者
2016-05-12

谢谢！

0 回复有任何疑惑可以回复我~

收起回答

不快逆流
2016-05-12

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的前后没有关系