有些时候我们需要根据某些条件来控制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. jedis提供的功能

    Sorting(排序) Connection handling(连接池) Commands operating on any kind of values Commands operating on ...

  2. MFC程序中消息以及函数的处理顺序简介[转]

    MFC应用程序中处理消息的顺序 1.AfxWndProc()      该函数负责接收消息,找到消息所属的CWnd对象,然后调用AfxCallWndProc 2.AfxCallWndProc()  该 ...

  3. ags js下载地址

    https://developers.arcgis.com/en/downloads/ 备用

  4. （剑指Offer）面试题19：二叉树的镜像

    题目: 操作给定的二叉树,将其变换为源二叉树的镜像. 二叉树的定义如下: struct TreeNode{ int val; TreeNode* left; TreeNode* right; }; 输 ...

  5. css初始化代码方案

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候 ...

  6. javaScript-原型、继承-01

    为什么会有原型这个概念: 1.优雅的创建对象: 2.继承: 先看js 之前创建对象的方式存在的问题: 创建对象方式 1.字面量 var obj={name:"join",age:1 ...

  7. Php最近1个月总结

    1.数据库方面太薄弱. 2.对于Php性能的调优也没有用到很专业的工具. 3.大型网站的架构也没有一个概念,需要细致的了解.

  8. 初步认识pg_control文件之一

    这个据说是PostgreSQL的control file. 到底如何呢,先看看改名后如何,把pg_control文件改名,然后启动 Postgres,运行时得到信息: [postgres@pg101 ...

  9. jQuery性能优化的28个建议

    我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...

  10. css margin的相关属性，问题及应用

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...