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

<html>

<head>

<title>HTML元素的显示与隐藏控制</title>

<script type="text/javascript">

function showAndHidden1(){

  var div1=document.getElementById("div1");

  var div2=document.getElementById("div2");

  if(div1.style.display=='block') div1.style.display='none';

  else div1.style.display='block';

  if(div2.style.display=='block') div2.style.display='none';

  else div2.style.display='block';

}  

function showAndHidden2(){

  var div3=document.getElementById("div3");

  var div4=document.getElementById("div4");

  if(div3.style.visibility=='visible') div3.style.visibility='hidden';

  else div3.style.visibility='visible';

  if(div4.style.visibility=='visible') div4.style.visibility='hidden';

  else div4.style.visibility='visible';

}

</script>

</head>

<body>

<div>display：元素的位置不被占用</div>

<div id="div1" style="display:block;">DIV 1</div>

<div id="div2" style="display:none;">DIV 2</div>

<input type="button" onclick="showAndHidden1();" value="DIV切换" />

<hr>

<div>visibility：元素的位置仍被占用</div>

<div id="div3" style="visibility:visible;">DIV 3</div>

<div id="div4" style="visibility:hidden;">DIV 4</div>

<input type="button" onclick="showAndHidden2();" value="DIV切换" />

</body>

</html>

控制HTML元素的显示与隐藏——display和visibility的更多相关文章

  1. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  2. 使用JavaScript控制HTML元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  3. 用switch组件控制一个元素的显示和隐藏状态

    微信小程序开发(交流QQ群:604788754) WXML: <view class="body-view"> <switch bindchange=" ...

  4. css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  5. react中控制元素的显示与隐藏

    1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...

  6. JS控制元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  7. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  8. legend3---19、要更多的从服务器端控制元素的显示和隐藏，而不要是页面端

    legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...

  9. [CSS]元素的显示与隐藏

    摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...

随机推荐

  1. String.Format格式说明（转）

    C#格式化数值结果表 字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) ＄2.000 D 十进制 string.Format("{0 ...

  2. Mahout之Canopy Clustering深入理解

    转自:http://www.cnblogs.com/vivounicorn/archive/2011/09/23/2186483.html Mahout学习——Canopy Clustering 聚类 ...

  3. eclipse提示servlet不存在 的解决办法

    在以前的版本中,Tomcat的common/lib目录下有一个名为servlet-api.jar的包,把它拷贝至你的java安装目录下jre/lib/ext下就可以了. 如果是:tomcat6就在To ...

  4. Codeforces Round #335 (Div. 2) B. Testing Robots 水题

    B. Testing Robots Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contest/606 ...

  5. Codeforces Round #335 (Div. 2) D. Lazy Student 构造

    D. Lazy Student Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/606/probl ...

  6. C#MongoDB 分页查询的方法及性能

    传统的SQL分页 传统的sql分页,所有的方案几乎是绕不开row_number的,对于需要各种排序,复杂查询的场景,row_number就是杀手锏.另外,针对现在的web很流行的poll/push加载 ...

  7. 深入了解android平台的jni---本地多线程调用java代码

    一.jni调用java对象     JNI提供的功能之一是在本地代码中使用Java对象.包括:创建一个java类对象和通过函数传递一个java对象.创建一个java类对象,首先需要得到得到使用Find ...

  8. 【Python】 做一个简单的 http server

    # coding=utf-8 ''' Created on 2014年6月15日 @author: Yang ''' import socket import datetime # 初始化socket ...

  9. [Oracle] - 性能优化工具（2） - ASH

    ASH和AWR的关系 ASH以V$SESSION为基础,每秒採样一次,记录活动会话等待的事件.不活动的会话不会採样,採样工作由新引入的后台进程MMNL来完毕. ASH内存记录数据始终是有限的,为了保存 ...

  10. mysql常用知识点

    --存储过程及常用流程控制语法 /*该代码是创建了一个名叫"p4"的存储过程并设置了s1,s2,s3两个int型一个varchar型参数,还可以是其他数据类型,内部创建了x1,x2 ...