欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-02 11:38:21
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。//语法：Object.style.display = value; 其中Object是获取的元素对象，如通过document.getElementById("id")获取的元素。 ......

网页中经常会看到显示和隐藏的效果，可通过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>

上一篇： 90%的单片机初学者，都会遇到的10个问题

下一篇： vue组件化实战

推荐阅读