首页
所有分类
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 相关文章推荐
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
jQuery知识点整理
Jan 30 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 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
接收机(2) 电子管(5) DSP(2) 放大器(1) 修复(2) 车机(1) 德生(17) 海燕B411(1) TECSUN(1) 矿石收音机(1)
You might like
解析zend Framework如何自动加载类
2013/06/28 PHP
php删除数组元素示例分享
2014/02/17 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php 数据结构之链表队列
2017/10/17 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
vue实现购物车加减
2020/05/30 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python 多线程应用介绍
2012/12/19 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
简单谈谈python的反射机制
2016/06/28 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
树莓派采用socket方式文件传输（python）
2019/06/22 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python实现名片管理系统
2020/02/14 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
医大实习自我鉴定
2013/12/07 职场文书
生产厂长岗位职责
2014/02/21 职场文书
项目申请汇报材料
2014/08/16 职场文书
销售代理协议书
2014/09/30 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
运动会运动员赞词
2015/07/22 职场文书
网络安全倡议书（3篇）
2019/09/18 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js