14JavaScript DOM显示和隐藏层 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <script type="text/javascript">
 6         onload = function () {
 7             //单击显示按钮显示层
 8             document.getElementById('btnShow').onclick = function () {
 9                 document.getElementById('dv').style.display = 'block';
10             };
11             //隐藏
12             document.getElementById('btnHidde').onclick = function () {
13                 document.getElementById('dv').style.display = 'none';
14             };
15             //切换变化
16             document.getElementById('btnChange').onclick = function () {
17                 //判断
18                 if (document.getElementById('dv').style.display != 'none') {
19                     document.getElementById('dv').style.display = 'none';
20                 } else {
21                     document.getElementById('dv').style.display = 'block';
22                 };
23             };
24         };
25     </script>
26 </head>
27 <body>
28     <input id="btnShow" type="button" name="name" value="显示 " />
29     <input id="btnHidde" type="button" name="name" value="隐藏 " />
30     <input id="btnChange" type="button" name="name" value="显示\隐藏 " />
31     <div id="dv" style="height:300px;width:400px;background-color:green;display:none" ></div>
32 </body>
33 </html>

 

posted on 2016-01-08 10:14  努力的活着_在人间  阅读(337)  评论(0)    收藏  举报

导航