首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 14, 2015

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

<!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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
input 高级限制级用法
Mar 26 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 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
沃尔沃(1) S900(1) 放大器(1) ETON(1) E1-XM(1) 矿石收音机(1) 军机(1) VOLVO(1) R601SW(1) DSP(2)
You might like
PHP获取当前执行php文件名的代码
2017/03/02 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
Python中functools模块函数解析
2017/03/12 Python
Python 列表理解及使用方法
2017/10/27 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python模块smtplib学习
2018/05/22 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
django的csrf实现过程详解
2019/07/26 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
《鞋匠的儿子》教学反思
2014/03/02 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
小学思品教学反思
2016/02/20 职场文书