编程 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 相关文章推荐

input 输入框内的输入事件详细分析

Mar 17 Javascript

jQuery 自动增长的文本输入框实现代码

Apr 02 Javascript

JS字符串处理实例代码

Aug 05 Javascript

分享JavaScript获取网页关闭与取消关闭的事件

Dec 13 Javascript

jquery+json实现动态商品内容展示的方法

Jan 14 Javascript

js实现精确到毫秒的倒计时效果

Aug 05 Javascript

JS仿淘宝搜索框用户输入事件的实现

Jun 19 Javascript

微信小程序 Buffer缓冲区的详解

Jul 06 Javascript

vue scroller返回页面记住滚动位置的实例代码

Jan 29 Javascript

js中Object.defineProperty()方法的不详解

Jul 09 Javascript

Angular5集成eventbus的示例代码

Jul 19 Javascript

Vue开发实现吸顶效果的示例代码

Aug 21 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

2.PHP入门

2006/10/09 PHP

将word转化为swf 如同百度文库般阅读实现思路及代码

2013/08/09 PHP

php根据日期判断星座的函数分享

2014/02/13 PHP

thinkphp实现数组分页示例

2014/04/13 PHP

php获取textarea的值并处理回车换行的方法

2014/10/20 PHP

JavaScript与HTML结合的基本使用方法整理

2015/10/12 PHP

Yii中实现处理前后台登录的新方法

2015/12/28 PHP

PHP封装请求类实例分析【基于Yii框架】

2019/10/17 PHP

如何使用jQuery来处理图片坏链具体实现步骤

2013/05/02 Javascript

jquery实现输入框动态增减的实例代码

2013/07/14 Javascript

jquery 层次选择器siblings与nextAll的区别介绍

2013/08/02 Javascript

js Select下拉列表框进行多选、移除、交换内容的具体实现方法

2013/08/13 Javascript

jQuery把表单元素变为json对象

2013/11/06 Javascript

为jQuery添加Webkit的触摸的方法分享

2014/02/02 Javascript

javascript动态创建及删除元素的方法

2014/12/22 Javascript

分析js闭包引起的事件注册问题

2016/03/29 Javascript

Jquery Easyui对话框组件Dialog使用详解（14）

2016/12/19 Javascript

jQuery实现对网页节点的增删改查功能示例

2017/09/18 jQuery

javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

2020/04/12 Javascript

js DOM的事件常见操作实例详解

2019/12/16 Javascript

利用Celery实现Django博客PV统计功能详解

2017/05/08 Python

详解python爬虫系列之初识爬虫

2019/04/06 Python

python 整数越界问题详解

2019/06/27 Python

Python帮你识破双11的套路

2019/11/11 Python

详解在python操作数据库中游标的使用方法

2019/11/12 Python

Pycharm在指定目录下生成文件和删除文件的实现

2020/12/28 Python

CSS教程：CSS3圆角属性

2009/04/02 HTML / CSS

css3实现平移效果(transfrom：translate)的示例

2020/11/13 HTML / CSS

Microsoft新加坡官方网站：购买微软最新软件和技术产品

2016/10/28 全球购物

Jdbc数据访问技术面试题

2012/03/30 面试题

打架检讨书2000字

2014/02/22 职场文书

医院我们的节日活动实施方案

2014/08/22 职场文书

兼职安全员岗位职责

2015/02/15 职场文书

美德少年事迹材料（2016推荐版）

2016/02/25 职场文书

2016年企业安全生产月活动总结

2016/04/06 职场文书

使用canvas实现雪花飘动效果的示例代码

2021/03/30 HTML / CSS