显示和隐藏（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. NX二次开发-UFUN求两个向量的叉乘UF_VEC3_cross

    NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_vec.h> #include <uf_ ...

  2. opencv-图像形态学之开运算、闭运算、形态学梯度、顶帽、黑帽合辑

    转自:https://blog.csdn.net/poem_qianmo/article/details/24599073 1.1 开运算(Opening Operation) 开运算(Opening ...

  3. Centos6.5安装ruby2.2.3

    一.安装库 Yum install –y gcc* openssl* wget 二.安装ruby wget https://cache.ruby-lang.org/pub/ruby/2.2/ruby- ...

  4. [zz]使用OleDb，将Excel导入DataSet

    本方法,将传入的Excel文件内所有的Sheet内的数据都填充入DataSet中.这是一个简单快捷的方法,不足之处是不适合带有格式复杂的Excel文件.(比如:有合并单元格的) public clas ...

  5. vs使用出现的一些常见错误（持续更新）

    vs2010编译出错时怎么会执行上一次的结果_百度知道https://zhidao.baidu.com/question/193018332.html

  6. nodejs--express安装失败的原因

    1.检查更新所有的npm ,jade,或者ejs. 2.在用jade或ejs也是有区别的,jade适合个人秀,ejs更实用与商务. 3.express在4.+之后的版本都分离了,推荐用3.+的版本稳定 ...

  7. 【图论】tarjan

    刚接触tarjan,tarjan其实更多是用来找强联通分量.我这里呢,是看qsc的视频学的.卿学姐讲的其实很清楚啦. 我这里只是做个整理. low[]:表示能到达这个点的最小编号.[树枝边].啊,其实 ...

  8. 更改idea启动内存信息

    1.到idea的安装目录的bin下,找idea64.exe.vmoptions 文件 2.更改参数 对应的参数解释: -Xms1024m    设置IDEA初时的内存大小,提高Java程序的启动速度. ...

  9. HTTP协议：响应消息

    一.请求消息:客户端发送给服务器端的数据 数据格式: 1.请求行 2.请求头 3.请求空行 4.请求体 二.响应消息:服务器端发送给客户的数据 数据格式: 1.响应行: 1.组成:协议/版本 响应状态 ...

  10. Qt学习笔记----基础知识

    一.qt的本质 qt的本质是c++的图形界面类库,本身是mvc结构.qt能火最大程度 归功于它跨平台的特性,一次编码,多次编译应用. 注意:qt由于历史原因,经历了奇趣.诺基亚.digit公司,导致q ...