编程 Javascript

javascript实现显示和隐藏div方法汇总

Posted in Javascript onAugust 14, 2015

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15种方法实现div显示和隐藏</title>
<script src="js/base.js"></script>
<style>
body{
 margin: 0;
}
h1,h2{
 margin: 0;
}
ul{
 margin: 0;
 padding: 0;
 list-style: none;
}
button{
 background-color: #333;
 color: white;
 padding: 5px;
 border: none;
 border-radius: 10px;
}
.box{
 width: 1000px;
 padding: 50px;
 border: 5px solid #333;
 margin: 100px auto 0;
 overflow: hidden;
}
.tit{
 text-align: center;
 margin-bottom: 20px;
}
.in-con{
 padding-top: 10px;
 overflow: hidden;
}
.in{
 width: 188px;
 height: 188px;
 padding: 5px;
 border: 1px solid #333;
 float: left;
 overflow: hidden;
}
.in-show{
 height: 100px;
 width: 120px;
 padding: 10px;
 background-color: orange;
 margin: 10px auto 0;
 line-height: 1.5;
 border-radius: 20px;
 text-align: center;
 word-break: break-all;
 overflow: hidden;
 transition: 0.5s;
}
</style>
</head>
<body>
<div class="box" id="box">
 <h1 class="tit">15种方法实现显示和隐藏div</h1>
 <ul class="list"></ul>
</div>
<script>
var oBox = $('box');
var oList = $(oBox,'ul')[0];
var data = ['display','visibility','absolute','margin负值','relative','width/height','opacity/rgba','hidden','skew','scale','translate','rotate','overflow','z-index','border-box'];
 
//生成结构
function fnNew(i){
 var sHtml = '';
 sHtml += '<div class="in-con">\
    <button class="in-btn_s">显示</button>\
    <button class="in-btn_h">隐藏</button>\
   </div>\
   <div class="in-show">第'+ (i+1) +'种方法:<br>'+ data[i]+'</div>';
 var element = document.createElement('li');
 element.className = 'in';
 element.innerHTML = sHtml;  
 oList.appendChild(element); 
}
 
for(var i = 0; i < data.length; i++){
 fnNew(i);
 var oIn = oList.getElementsByTagName('li')[i];
 var aBtn = oIn.getElementsByTagName('button');
 var oShow = oIn.getElementsByTagName('div')[1];
 for(var j = 0 ; j < 2; j++){
  aBtn[j].m = oShow;
  aBtn[j].i = i;
  aBtn[j].j = j;
  aBtn[j].onclick = function(){
   fn(this.m,this.j,this.i);
  }
 }
 
}
function fn(obj,switcher,index){
 switch(index){
  //【方法一】display: block/none
  case 0:
   if(!switcher){
    obj.style.display = 'block';
   }else{
    obj.style.display = 'none';
   }
  break;
  //【方法二】visibility:true/false
  case 1:
   if(!switcher){
    obj.style.visibility = 'visible';
   }else{
    obj.style.visibility = 'hidden';
   }
  break;
  //【方法三】absolute+top/static
  case 2:
   if(!switcher){
    obj.style.cssText = 'position:static';
   }else{
    obj.style.cssText = 'position:absolute;top:-999px';
   }
  break;
  //【方法四】margin-top
  case 3:
   if(!switcher){
    obj.style.cssText = 'margin-top: 10px';
   }else{
    obj.style.cssText = 'margin-top:-999px';
   }
  break;
  //【方法五】relative + top / static
  case 4:
   if(!switcher){
    obj.style.cssText = 'position: static';
   }else{
    obj.style.cssText = 'position: relative; top: -999px';
   }
  break;
  //【方法六】width/height
  case 5:
   if(!switcher){
    obj.style.cssText = 'width:100px; padding: 10px';
   }else{
    obj.style.cssText = 'width:0; padding: 0';
   }
  break;
  //【方法七】opacity/rgba
  case 6:
   if(!switcher){
    obj.style.opacity = '1';
   }else{
    obj.style.opacity = '0';
   }
  break;
  //【方法八】hidden
  case 7:
   if(!switcher){
    obj.hidden = false;
   }else{
    obj.hidden = true;
   }
  break;
  //【方法九】skew
  case 8:
   if(!switcher){
    obj.style.transform = 'skew(0)';
   }else{
    obj.style.transform = 'skew(90deg)';
   }
  break;
  //【方法十】scale
  case 9:
   if(!switcher){
    obj.style.transform = 'scale(1)';
   }else{
    obj.style.transform = 'scale(0)';
   }
  break;
  //【方法十一】translate
  case 10:
   if(!switcher){
    obj.style.transform = 'translateX(0)';
   }else{
    obj.style.transform = 'translateX(-999px)';
   }
  break;
  //【方法十二】rotate
  case 11:
   if(!switcher){
    obj.style.transform = 'rotateX(0)';
   }else{
    obj.style.transform = 'rotateX(90deg)';
   }
  break;
  //【方法十三】overflow
  case 12:
   if(!switcher){
    obj.style.cssText = 'transform: translateX(0)';
   }else{
    obj.style.cssText = 'transform: translateX(220px)';
   }
  break;
  //【方法十四】z-index
  case 13:
   var element = document.createElement('div');
   element.style.cssText = 'height: 100px;width: 120px;padding: 10px;background-color: white; margin-top: 10px;margin-left: 13%;position:absolute ;z-index: -1';
   obj.parentNode.appendChild(element);
   if(!switcher){
    obj.style.cssText = '';
    obj.parentNode.style.position = 'static';
   }else{
    obj.style.cssText = 'z-index:-1; position:absolute;margin-left: 13%;';
    obj.parentNode.style.position = 'relative';
   }
  break;
  //【方法十五】border-box
  case 14:
   if(!switcher){
    obj.style.cssText = '';
   }else{
    obj.style.cssText = 'padding: 0; box-sizing: border-box; border: 50px solid white;';
   }
  break;                                   
 }
}
</script>
</body>
</html>

我们再来看下其他小伙伴是如何实现的

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>oec2003</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function toggle(targetid){

  if (document.getElementById){

    target=document.getElementById(targetid);

      if (target.style.display=="block"){

        target.style.display="none";

      } else {

        target.style.display="block";

      }

  }

}

-->

</script>

<style type="text/css">

<!--

#div1{

background-color:#000000;

height:400px;

width:400px;

display:none;

}

-->

</style>

</head>



<body>

<input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />

<center>

<div id="div1"></div></center>

居中的DIV

</body>

</html>

示例三：

先来看一个最简单的实例,这个可以实现显示和隐藏层

<div id="text"></div><input type="button" onclick="display('text')" />
function $_(id){ 
return document.getElementById(id);
};
function display(x){ 
$(x).style.display=($(x).style.display=="none")?"":"none";
};

下面是关闭层，其实原理是一样的只是加了个效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ position:relative;}
.wang{ width:100%; height:100%; background:#CCC; display:none; z-index:10; position:fixed; top:0px; left:150px; margin:0 auto; left:inherit; padding:0;filter:alpha(opacity=60); /* 针对IE浏览器的透明度 */
  opacity:0.6; /* 针对FF浏览器的透明度 */}
.wang ul{ width:100px; height:100px; margin:0 auto;}  
</style>
</head>
<body>
<a onclick="dianji()">弹出</a><input type="text" />
<div class="wang" id="xian" onclick="guanbi()"><ul><form><label>姓名</label><input id="wangyan" type="text" /><br /><label>密码</label><button style="width:100px; height:100px;" onclick="guanbi(this)">关闭</button></form></ul></div>
<script type="text/javascript">
function dianji(){
  x=document.getElementById("xian");
  x.style.display="block";
  return false;
  }
  function guanbi(name){ 
  var c=document.getElementById("wangyan").value;
  if(c==3){
    
  x.style.display='none';
  return false;
  }  
  }
</script>
</body>
</html>

javascript实现显示和隐藏div方法汇总

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript while语句和do while语句的区别分析

Dec 08 Javascript

移动节点的jquery代码

Jan 13 Javascript

jquery实现简单实用的弹出层效果代码

Oct 15 Javascript

jQuery实现的指纹扫描效果实例(附演示与demo源码下载)

Jan 26 Javascript

JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面

Aug 04 Javascript

Javascript中Promise的四种常用方法总结

Jul 14 Javascript

VsCode插件整理（小结）

Sep 14 Javascript

jquery-file-upload 文件上传带进度条效果

Nov 21 jQuery

vue-cli3 从搭建到优化的详细步骤

Jan 20 Javascript

浅谈Express.js解析Post数据类型的正确姿势

May 30 Javascript

uni-app如何实现增量更新功能

Jan 03 Javascript

vue proxy 的优势与使用场景实现

Jun 15 Javascript

freemarker判断对象是否为空的方法

Aug 13 #Javascript

数据分析软件之FineReport教程：[5]参数界面JS（全）

Aug 13 #Javascript

在jQuery中使用$而避免跟其它库产生冲突的方法

Aug 13 #Javascript

再JavaScript的jQuery库中编写动画效果的指南

Aug 13 #Javascript

js实现仿网易点击弹出提示同时背景变暗效果

Aug 13 #Javascript

JavaScript生成SQL查询表单的方法

Aug 13 #Javascript

对于jQuery性能的一些优化建议

Aug 13 #Javascript

You might like

PHP 字符串操作入门教程

2006/12/06 PHP

PHP COOKIE设置为浏览器进程

2009/06/21 PHP

PHP n个不重复的随机数生成代码

2009/06/23 PHP

php入门学习知识点六 PHP文件的读写操作代码

2011/07/14 PHP

php生成动态验证码gif图片

2015/10/19 PHP

Thinkphp通过一个入口文件如何区分移动端和PC端

2017/04/18 PHP

php生成条形码的图片的实例详解

2017/09/13 PHP

Javascript实例教程(19) 使用HoTMetal(5)

2006/12/23 Javascript

Domino中运用jQuery读取视图内容的方法

2009/10/21 Javascript

jQuery的12招常用技巧分享

2011/08/08 Javascript

jQuery.prototype.init选择器构造函数源码思路分析

2013/02/05 Javascript

Javascript 修改String 对象增加去除空格功能(示例代码)

2013/11/30 Javascript

Javascript实现可旋转的圆圈实例代码

2015/08/04 Javascript

JavaScript中的call方法和apply方法使用对比

2015/08/12 Javascript

使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法

2015/09/16 Javascript

跟我学习javascript解决异步编程异常方案

2015/11/23 Javascript

浅谈JavaScript 覆盖原型以及更改原型

2016/08/31 Javascript

浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

2016/09/09 Javascript

js内置对象处理_打印学生成绩单的简单实现

2016/09/24 Javascript

微信小程序之购物车功能

2020/09/23 Javascript

AngularJS自定义指令之复制指令实现方法

2017/05/18 Javascript

vue点击自增和求和的实例代码

2019/11/06 Javascript

微信小程序自定义扫码功能界面的实现代码

2020/07/02 Javascript

Vue将props值实时传递并可修改的操作

2020/08/09 Javascript

[01:12:40]DOTA2-DPC中国联赛正赛 DLG vs XG BO3 第三场 1月25日

2021/03/11 DOTA

python决策树之CART分类回归树详解

2017/12/20 Python

pytorch绘制并显示loss曲线和acc曲线，LeNet5识别图像准确率

2020/01/02 Python

python图形界面开发之wxPython树控件使用方法详解

2020/02/24 Python

Python调用shell命令常用方法(4种)

2020/05/11 Python

Python venv虚拟环境配置过程解析

2020/07/08 Python

python中pdb模块实例用法

2021/01/15 Python

西安夏日科技有限公司Java笔试题

2013/01/11 面试题

统计专业自荐书

2014/07/06 职场文书

简易离婚协议书（范本）

2014/10/25 职场文书

2019毕业典礼主持词！

2019/07/05 职场文书

详解JS WebSocket断开原因和心跳机制

2021/05/07 Javascript