显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

语法：

  1. Object.style.display = value

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

value取值:

看看下面代码:

任务

我们来实现id="con"的p标签元素的隐藏和显示:

1. 在右边编辑第10行补充代码，通过style.display实现隐藏。

2. 在右边编辑第15行补充代码，通过style.display实现显示。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>display</title>
  6.     <script type="text/javascript">
  7.         function hidetext()
  8. 		{
  9. 		var mychar = document.getElementById("con").style.display="none";
  10.  
  11. 		}
  12. 		function showtext()
  13. 		{
  14. 		var mychar = document.getElementById("con").style.display="block";
  15.  
  16. 		}
  17.     </script>
  18. </head>
  19. <body>
  20.     <h1>JavaScript</h1>
  21.     <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
  22.     <form>
  23.        <input type="button" onclick="hidetext()" value="隐藏内容" />
  24.        <input type="button" onclick="showtext()" value="显示内容" />
  25.     </form>
  26. </body>
  27. </html>

显示和隐藏（display属性）none或block的更多相关文章

  1. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  2. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  3. 把display 属性改为block样式变化问题

    可能的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...

  4. Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间

         div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElemen ...

  5. JS 实现显示和隐藏div（以百度地图为例）

    主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html ...

  6. CSS学习笔记：display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  7. WPF中控件的显示与隐藏

    1.WPF中控件的显示与隐藏的属性是 Visibility,它有3个枚举值 Visible, Hidden 和 Collapsed.其中Visible为可见,而 Hidden 和 Collapsed ...

  8. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  9. 显示和隐藏（display属性）

    网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对象,如通过document.get ...

随机推荐

  1. NX二次开发-UFUN打开信息窗口UF_UI_open_listing_window()

    NX9+VS2012 #include <uf.h> #include <uf_ui.h> UF_initialize(); //方法1(uc1601) uc1601();// ...

  2. NX二次开发-UFUN由工程图视图tag获取图纸页tag UF_DRAW_ask_drawing_of_view

    #include <uf.h> #include <uf_draw.h> #include <uf_drf.h> #include <uf_obj.h> ...

  3. NX二次开发-UF_ASSEM_ask_component_data获取装配部件的相关信息

    NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_assem.h> ], void* user_ ...

  4. flutter 死亡红屏 隐藏

    当组件报错的时候会出现红屏现象,解决办法是覆盖原有的ErrorWidget 用一个空白的组件去替换它 1.main.dart中进行修改 新增覆盖代码: void setCustomErrorPage( ...

  5. sql基础学习

    学习参考网站:http://www.runoob.com/sql/sql-tutorial.html 一.SQL命令 1.SELECT 语句 用于从数据库中选取数据. select column_na ...

  6. 6. 第一个jmeter脚本开发-测试百度首页

    需求:可以承受5个用户同时访问百度解题思路:我们可以从这短短的一句话中提取3个点:同时.5个并发.百度服务器解题方法:方法一:录制请求录制方法会在下一篇进行讲解,本篇不做过多介绍. 方法二:自定义添加 ...

  7. STM32F103

    memory map • Four masters: – Cortex® -M3 core DCode bus (D-bus) and System bus (S-bus)– GP-DMA1 & ...

  8. 绿色版mysql 免安装使用（转载）

    MySQL绿色版的安装(mysql-5.6.22-win32.zip) Posted on 2015-01-31 23:21 卒子 阅读(10739) 评论(2) 编辑 收藏 由于工作需要最近要开始研 ...

  9. python 17 异常

    自 http://www.cnblogs.com/BeginMan/p/3171445.html 一.什么是错误,什么是异常,它们两者区别 这里解释如下:个人觉得很通俗易懂 错误是指在执行代码过程中发 ...

  10. Unity实现Android端视频播放

    本文只讲Android短的视频播放 实现方式 使用Handheld.PlayFullScreenMovie(),这个函数实现.具体如下: 1.创建StreamingAssets文件夹,此文件夹放入视频 ...