有些时候我们需要根据某些条件来控制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. 结构类模式（七）：代理（Proxy）

    定义 为其他对象提供一种代理以控制对这个对象的访问. 代理模式也叫做委托模式,它是一项基本设计技巧.许多其他的模式,如状态模式.策略模式.访问者模式本质上是在更特殊的场合采用了委托模式,而且在日常的应 ...

  2. 结构类模式（五）：外观（Facade）

    定义 为子系统中的一组接口提供一个一致的界面,定义一个高层接口,这个接口使得这一子系统更加容易使用. UML 优点 对客户屏蔽了其子系统组件,因而减少了客户处理对象的数目,并使得子系统实用起来更方便. ...

  3. 第一章TP-Link 703N刷OpenWrt

    1)下载编译好的固件 openwrt-ar71xx-generic-tl-wr703n-v1-squashfs-factory.bin openwrt-ar71xx-generic-tl-wr703n ...

  4. 传参方式由url携带改为post提交

    参考:http://www.cnblogs.com/logon/p/3218834.html 我们这里使用了iframe嵌套form表单POST提交,很简单,却能满足get|post等任何复杂情况的要 ...

  5. Flex利用titleIcon属性给Panel容器标题部添加一个ICON图标

    Flex利用titleIcon属性,给Panel容器标题部添加一个ICON图标. 让我们先来看一下Demo(可以右键View Source或点击这里察看源代码): 下面是完整代码(或点击这里察看): ...

  6. k近邻法的C++实现：kd树

    1.k近邻算法的思想 给定一个训练集,对于新的输入实例,在训练集中找到与该实例最近的k个实例,这k个实例中的多数属于某个类,就把该输入实例分为这个类. 因为要找到最近的k个实例,所以计算输入实例与训练 ...

  7. ORCALE用户授权与创建同义词

    创建同义词: DROP public synonym marketmonitor_day; DROP public synonym marketmonitor_month; DROP public s ...

  8. Codeforces Gym 100531G Grave 水题

    Problem G. Grave 题目连接: http://codeforces.com/gym/100531/attachments Description Gerard develops a Ha ...

  9. (转)用AGG实现高质量图形输出(三)

    转自 :http://www.cnblogs.com/CoolJie/archive/2011/04/27/2030260.html 线段生成器(Span Generator) 我们前面举的例子使用的 ...

  10. MySql中的事件

    一.前言 自MySQL5.1.0起,增加了一个非常有特色的功能–事件调度器(Event Scheduler),可以用做定时执行某些特定任务(例如:删除记录.对数据进行汇总等等),来取代原先只能由操作系 ...