显示和隐藏（display属性）

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

语法：

Object.style.display = value

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

value取值:

看看下面代码:

任务

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

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

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

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>display</title>

    <script type="text/javascript">

        function hidetext()

		{

		var mychar = document.getElementById("con").style.display="none";

		}

		function showtext()

		{

		var mychar = document.getElementById("con").style.display="block";

		}

    </script>

</head>

<body>

    <h1>JavaScript</h1>

    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>

    <form>

       <input type="button" onclick="hidetext()" value="隐藏内容" />

       <input type="button" onclick="showtext()" value="显示内容" />

    </form>

</body>

</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. 图片和base64 二进制相互转换

    package com.xldz.xlworkbench.util; import java.awt.image.BufferedImage; import java.io.ByteArrayInpu ...

  2. AsyncCallback IAsyncResult

    using System; using System.Threading; using System.Collections.Generic; using System.Windows.Forms; ...

  3. 8、collection

    collection 可以理解为一个容器 组织业务逻辑 导入导出 监控或者mock server 实例: 1.新建一个collection,命名为v2ex 2.保存1个请求到v2ex 3.选中v2ex ...

  4. 如何在Spring Boot 中动态设定与执行定时任务

    本篇文章的目的是记录并实现在Spring Boot中,动态设定与执行定时任务. 我的开发项目是 Maven 项目,所以首先需要在 pom.xml 文件中加入相关的依赖.依赖代码如下所示: <de ...

  5. C#面向对象通信

    面向对象通信编程: 看起来像是调用本地的函数,就得到了结果: 实际上参数是传递到了远程机器上了,而函数也是在远程机器上运行的.

  6. 《转》python 9 字典，numpy

    http://www.cnblogs.com/BeginMan/p/3156960.html 一.映射类型 我理解中的映射类型是:键值对的关系,键(key)映射值(value),且它们是一对多的关系. ...

  7. 17-Ubuntu-文件和目录命令-切换目录-相对路径和绝对路径

    1.相对路径: 在输入路径时,最前面不是/或者~,表示相对当前目录所在的目录位置. 例:当前桌面目录下,通过相对路径切换到桌面目录下的Entertainment目录 2.绝对路径: 在输入路径时,最前 ...

  8. uoj213 【UNR #1】争夺圣杯

    题目 设\(f_i\)表示所有长度为\(i\)的区间的最大值的和,求\(\bigoplus \sum_{i=1}^nf_i\) 不难发现随机数据非常好做 由于一个随机序列的前缀最大值期望只会变化\(\ ...

  9. sys_call_table HOOK

    sys_call_table 这个东西,其实和 Windows 下的 SSDT 表,在功能上完全相同. 前一阵子学Linux驱动,遇到了这个系统调用表,然后我就想到Windows的SSDT表,既然SS ...

  10. Oracle SQL外连接

    SQL提供了多种类型的连接方式,它们之间的区别在于:从相互交叠的不同数据集合中选择用于连接的行时所采用的方法不同.连接类型        定义内连接           只连接匹配的行左外连接     ...