有些时候我们需要根据某些条件来控制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. webbench压力测试

    webbench最多可以模拟3w多个并发请求去测试网站负载能力. 一:获取webbench工具,安装编译: wget http://blog.zyan.cc/soft/linux/webbench/w ...

  2. 如何在协作开发安卓项目中打jar包给合作人

    一般情况下,id都是安卓自动生成的.使用时只要用R.id.xx就可以了.但是,在合作开发安卓时,需要将自己开发的代码部分打成jar包,甚至做混淆. 这就需要使用java的反射机制.在取id时使用如下类 ...

  3. c# abstract抽象类与继承类子类的构造函数_base

    http://blog.itpub.net/9240380/viewspace-718054/ http://blog.163.com/cloud_thegreat/blog/static/10367 ...

  4. jQuery（一）delegate() 方法

    定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来 ...

  5. javaScript-原型、继承-02

    原型链 首先回顾下实列.构造函数.原型对象之间的关系: 实列都包含指向原型对象的一个指针(_proto_): 构造函数都有prototype(原型属性)指向原型对象的指针: 原型是一个对象也存在一个内 ...

  6. JAVA组程序优化综合考试试题

    题目原型: 有一张标准的树状结构表,里面有Structure_Id和 Parent_Id两个关键列,记录了结点的父子关系.现在要求添加一个字段为 Structure_Code ,标记为 三位一个节点关 ...

  7. 内网能PING通TELNET通不能访问解决

    遇到一个离奇故障,内网,两个主机在同一IP段内,能互相PING通,TELNET对方的WEB服务器端口,通. 但用IE访问时不能,显示HTTP400.这明显是客户端系统的问题啊!但如何解决呢?我强烈怀疑 ...

  8. Objective-C语法之代码块(block)的使用

    代码块本质上是和其它变量相似.不同的是,代码块存储的数据是一个函数体.使用代码块是,你能够像调用其它标准函数一样,传入參数数,并得到返回值. 脱字符(^)是块的语法标记.依照我们熟悉的參数语法规约所定 ...

  9. Linq 学习

    聚合操作符                                                                                              说 ...

  10. jQuery：在一个回调中处理多个请求

    我曾经为Mozilla Developer Network 开发一个新功能,它需要加载一个基本的脚本文件的同时加载一个JSON请求.因为我们使用的是jQuery,意味着要使用 jQuery.getSc ...