有些时候我们需要根据某些条件来控制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. 那些不被关注但很重要的html标签

    1.meta标签: <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部, ...

  2. android开发中关于VersionCode和VersionName

    Google为APK定义了两个关于版本属性:VersionCode和VersionName,他们有不同的用途. VersionCode:对消费者不可见,仅用于应用市场.程序内部识别版本,判断新旧等用途 ...

  3. .net基础知识

    1.private.protected.public.internal修饰符的访问权限  Private:私有成员,只能在当前类中才可以访问  Protected:保护成员,在当前类和继承类中访问  ...

  4. 【ToolGood.Words】之【StringSearch】字符串搜索——基于BFS算法

    字符串搜索中,BFS算法很巧妙,个人认为BFS算法效率是最高的. [StringSearch]就是根据BFS算法并优化. 使用方法: string s = "中国|国人|zg人|fuck|a ...

  5. ref和out的使用与区别

    out的使用 ————————————————————————————————————————————————— class Program    {        static void Main( ...

  6. ActionBarCompat

    布局文件中添加menu menu_main.xml <?xml version="1.0" encoding="utf-8"?> <menu ...

  7. Mailbox and Mail

    #ifndef __MAILBOX_H__ #define __MAILBOX_H__ #include <stdint.h> #include <stdlib.h> #inc ...

  8. 玩转iOS开发 - 多线程开发

    前言 本文主要介绍iOS多线程开发中使用的主要技术:NSOperation, GCD. NSThread, pthread. 内容依照开发中的优先推荐使用的顺序进行介绍,涉及多线程底层知识比較多的NS ...

  9. Java生成 Word文档的并打印解决方案

    户要求用程序生成标准的word文档,要能打印,而且不能变形,以前用过很多解决方案,都在客户严格要求下牺牲的无比惨烈. POI读word文档还行,写文档实在不敢恭维,复杂的样式很难控制不提,想象一下一个 ...

  10. 使用Ant命令压缩JavaScript文件

    压缩JavaScript文件可以减少代码尺寸,保护源代码,节省网络带宽,加快页面打开速度,甚至优化JS代码.Yahoo有一个压缩JS的工具叫做YUI compressor, Google也有一个工具叫 ...