Object.style.display = value的值完成显示隐藏

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。//语法:Object.style.display = value; 其中Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>显示隐藏display属性</title>
 6         <script type="text/javascript">
 7             function yc(){
 8                 var myceshi=document.getElementById('ceshi');
 9                 myceshi.style.display='none';
10             }
11             function xs(){
12                 var myceshi=document.getElementById('ceshi');
13                 myceshi.style.display='block';
14             }
15         </script>
16     </head>
17     <body>
18         <div id="ceshi">
19             <ul>
20                 <li>DOM树定义了HTML/XML文档的逻辑结构,给出了一种应用程序访问和处理XML文档的方法。</li>
21                 <li>在DOM树中,有一个根节点,所有其他的节点都是根节点的后代。</li>
22                 <li>在应用过程中,基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树,应用程序通过对DOM树的操作,来实现对HTML/XML文档数据的操作。</li>
23             </ul>
24         </div>
25         <form action="" method="">
26             <input type="button" name="" id="" value="点击隐藏" onclick="yc()"/>
27             <input type="button" name="" id="" value="点击显示" onclick="xs()"/>
28         </form>
29     </body>
30 </html>

其中value的值有none和block, myceshi.style.display='none'是为此元素不会被显示(即隐藏),myceshi.style.display='block'此元素将显示未块级元素(即显示)

posted @ 2020-03-17 13:29  鬼牛阿飞  阅读(737)  评论(0编辑  收藏  举报