显示和隐藏（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. Delphi中关于菜单的几个技巧

    -- 1将菜单项移到菜单栏的最右边 在一些应用程序中,常把一些特殊的菜单项放在菜单栏的最右边(如WPS2000 中的"定制界面"菜单,一些应用程序的帮助菜单),这些菜单项放在菜单栏 ...

  2. csp-s模拟测试95

    csp-s模拟测试95 去世场祭. $T1$:这不裸的除法分块吗. $T2$:这不裸的数据结构优化$Dp$吗. $T3$:这不裸的我什么都不会搜索骗$30$分吗. 几分钟后. 这除法分块太劲了..(你 ...

  3. Oracle sql判断一个字段是否全数字 或含有中文

    update (select length(t.name), t.* -- name,length(name) from g_enterprise_info t where nvl2(translat ...

  4. [转]ThinkPHP分页实例

    很多人初学thinkphp时,不太熟悉thinkphp的分页使用方法,现在将自己整理的分页方法分享下,有需要的朋友可以看看.   控制器中的代码:   $db = M("cost" ...

  5. bagging和boosting以及rand-forest

    bagging: 让该学习算法训练多轮,每轮的训练集由从初始的训练集中随机取出的n个训练样本组成,某个初始训练样本在某轮训练集中可以出现多次或根本不出现,训练之后可得到一个预测函数序列h_1,⋯ ⋯h ...

  6. 8-MySQL高级-主从-2

    详细配置主从同步的方法 主和从的身份可以自己指定,我们将虚拟机Ubuntu中MySQL作为主服务器,将Windows中的MySQL作为从服务器. 在主从设置前,要保证Ubuntu与Windows间的网 ...

  7. 2019-3-20-win10-uwp-如何自定义-RichTextBlock-右键菜单

    title author date CreateTime categories win10 uwp 如何自定义 RichTextBlock 右键菜单 lindexi 2019-3-20 9:54:9 ...

  8. Hadoop Tez框架

  9. Caused by: android.view.InflateException: Binary XML file line #18: Binary XML file line #18: Error inflating class android.widget.CheckedTextView

    困扰了我一天啊 终于吧 这个大bug  给解决掉了 可能是 当时懵逼了  竟然忘记重新构造了!!尴尬了 直接把项目的 build  文件删除重新构造了一边!!

  10. vagrant centos lamp小记

    更新包 sudo yum -y update vagrant centos 默认语言好像是德语,看不懂,需要更换为 en_US [vagrant@localhost ~]$ locale LANG=d ...