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

2024-09-29 12:59:09

<!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实现下拉菜单的显示和隐藏

我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏.使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单showsub()函数:使用getElementsByTagName获
AngularJS中实现显示或隐藏动画效果的方式总结

AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果思路: →npm install angular-animage →依赖:var app = angular.module("app",["ngAnimate"]); →
javascript点击按钮实现隐藏显示切换效果

本文实例分享了点击按钮实现隐藏和显示的切换代码,供大家参考,具体内容如下效果图: 在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: <html> <head> <meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv
AngularJS实现元素显示和隐藏的几个案例

案例一:控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8&qu
JS实现“隐藏与显示”功能(多种方法)

下面我将效果图展示出来: 1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通过按钮实现隐藏和显示</title> <style type="text/css"> .body{ margin: 0 auto; } #show{ wid
js控制TR的显示隐藏

下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码.注意:ready方法必须要引用jquery的库. 1.html Code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css&
vueJS简单的点击显示与隐藏的效果【实现代码】

目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好感觉跟适合. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if.v-else.v-show&l
javascript实现显示和隐藏div方法汇总

javascript实现显示和隐藏div方法汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <script src="js/base.js"></script> <style> body{ mar
javascript控制层显示或隐藏的方法

本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl
jQuery基于闭包实现的显示与隐藏div功能示例

本文实例讲述了jQuery基于闭包实现的显示与隐藏div功能.分享给大家供大家参考,具体如下: <div class="binds"> <div class="phonebind"> <h3>手机绑定</h3> <p>当前手机号码:<span id="oldPhone">$!{user.phone}</span><input type="butto
javascript实时显示当天日期的方法

本文实例讲述了javascript实时显示当天日期的方法.分享给大家供大家参考.具体实现方法如下: <!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"&g
JavaScript实现显示函数调用堆栈的方法

本文实例讲述了JavaScript实现显示函数调用堆栈的方法.分享给大家供大家参考,具体如下: 许多大型的JavaScript应用程序间的函数调用关系是非常复杂的,在开发或者调试过程中,经常需要跟踪某个函数是由哪些函数调用后才触发执行的,弄清楚这些函数的调用顺序对我们理解代码的数据流向是非常重要的. Firebug提供了console.trace()来显示函数堆栈,在需要调试的地方加上下面的一行代码就能显示该函数调用时的上下文关系.IE6就没有这么方便了,它没有提供显示函数堆栈的工具,当不可避免
JavaScript实现显示和隐藏图片

JavaScript之显示和隐藏图片,供大家参考,具体内容如下点击按钮可以显示和隐藏图片(默认显示),附上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示和隐藏图片</title> </head> <body> <button id="btn"
javascript随机显示背景图片的方法

本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi
javascript实时显示北京时间的方法

本文实例讲述了javascript实时显示北京时间的方法.分享给大家供大家参考.具体如下: 该页面中实时显示北京时间,更改时区也可以作为显示世界时间,代码如下: 复制代码代码如下: <script type="text/javascript"> Date.prototype.strftime = function(format){ var o = { "M+" : this.getMonth()+1, //month
JQuery显示、隐藏div的几种方法简明总结

例子复制代码代码如下: $("#top_notice").css("display", "block");//第1种方法 //$("#top_notice").attr("style", "display:block;");//第2种方法 //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

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

相关推荐

随机推荐