如何完成呢？

var close=document.getElementById("close");
      var btn=document.getElementById("btn");
      var box=document.getElementById("box");
      btn.onclick=function(){
          box.className='close';  
      }
      close.onclick=btn.onclick

这样为什么不可以？

慕姐7564978 2017-05-20

源自：JavaScript函数深入讲解 5-6 编程练习

收起

3回答

小丸子爱吃菜回答被采纳获得+3积分 2017-05-20 17:30:32

box.className='close';有给close设置display：none;吗？

收起回答

慕姐7564978 提问者 #1

<style type="text/css"> #box{position: relative; width: 100px; height: 100px; background-color: red; margin: 10px auto;} #close{position: absolute; right: 0px; top: -4px; color: yellow;} #btn{display: block; width: 100px; margin: 0 auto;} </style> </head> <body> <div id="box"> <span id="close">X</span> </div> <button id="btn">关闭</button> <script type="text/javascript"> var close=document.getElementById("close"), btn=document.getElementById("btn"), box=document.getElementById("box"); btn.onclick=function(){ box.className='close'; } close.onclick=function(){ box.className='close'; }

2017-05-20 18:52:51
慕姐7564978 提问者 #2

如果写了display盒子直接就没有了

2017-05-20 18:53:37

小丸子爱吃菜 2017-05-20 19:23:13

<!DOCTYPE html>
<html>
<head>
    <style type="text/css"> 
	    #box{position: relative; width: 100px; height: 100px; background-color: red; margin: 10px auto;}
	    #close{position: absolute; right: 0px; top: -4px; color: yellow;} 
	    #btn{display: block; width: 100px; margin: 0 auto;}
	    .close{display:none;}
    </style>   
</head>     
<body>
      <div id="box"> 
      	<span id="close">X</span> 
      </div> 
      <button id="btn">关闭</button>
      <script> 
       	var box = document.getElementById('box');
		var close = document.getElementById('close');
		var btn = document.getElementById('btn');

		btn.onclick = function () {
			box.className="close"
		};
		close.onclick = function () {
			btn.onclick();
		}
	</script>
</body>
</html>

收起回答

qq_无疯不成魔 #1

这样写的可读性有点差

2017-06-02 15:10:33
qq_无疯不成魔 #2

var box = document.getElementById("box"); var close = document.getElementById("close"); var btn = document.getElementById("btn"); var boxClose =function (){ box.style.display = "none"; }; close.onclick = boxClose; btn.onclick = boxClose;

2017-06-02 15:11:36