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

最新推荐文章于 2024-03-06 09:53:52 发布
最新推荐文章于 2024-03-06 09:53:52 发布
阅读量8.5k 收藏 4
点赞数
分类专栏： JavaScript CSS HTML5 文章标签： javascript 隐藏div
JavaScript 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
HTML5
9 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏 
<!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>

转自：http://www.jb51.net/article/71055.htm

三五月儿
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
weixin_42530536的博客
06-03 1424
javascript实现显示和隐藏div方法汇总15种方法实现div显示和隐藏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: 10...
JS实现各种动态显示隐藏div效果
01-10
JS实现各种动态显示隐藏div效果，包括卷动显示隐藏效果，渐变显示隐藏效果，大小缩放显示隐藏效果
JS显示隐藏DIV(动画效果)
03-10
封装好的JS显示隐藏DIV(动画效果,递增显示,递减隐藏),很实用很炫的效果,已测试支持ie,firefox,safari,opera,谷歌浏览器.有bug和不足处欢迎指正,交流.
div 隐藏 显示 占空间 不占空间
weixin_33875564的博客
09-22 1053
引用：http://0755-oopp.blog.163.com/blog/static/2673281201011632617841/ div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";...
js div的显示和隐藏
dxm809的博客
03-18 218
&lt;head&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style type="text/css"&gt;        div    {        display:block;        }    &lt;/style&gt;    &lt;script type="text/javascript"&gt;     
js显示隐藏div块
weixin_30617695的博客
02-08 433
<div id="text"></div><input type="button" onclick="display('text')" /> function $_(id){ return document.getElementById(id);};function display(x){ $(x).style.display=($(x).st...
JS和jQuery显示隐藏div的方法
最新发布
INNER_PEACE_DS的博客
03-06 664
js显示隐藏div
js控制div显示隐藏
别在熬夜了！
12-24 1376
function show(){ document.getElementById("div").style.display=""; //alert(document.getElementById("div").style.display) } function hiddens(){ document.getElementById("div").style.display="none"; //ale
js显示与隐藏div（一）
飘过的春风
06-08 1005
功能：点击增加按钮显示div标签，再点击消失。进入界面时不显示。 //进入时隐藏 $(document).ready(function(){ $("#showHide").hide(); }); //显示和隐藏函数 function showOrHide(){ if(showHide.style.display=='none'){ showHide.style.display...
js点击页面其它地方将某个显示的DIV隐藏
10-28
今天一朋友问我 点击一按钮弹出一个DIV，然后要求点击页面其它地方隐藏这个DIV
js实现多div的显示和隐藏
07-03
js实现多div的显示和隐藏,可实现选项卡效果。详细说明：http://www.our-code.com/news/201073/n616722.html 源码在文章中也全。
JS实现“隐藏与显示”功能(多种方法)
10-21
主要介绍了JS实现“隐藏与显示”功能的多种方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
JS实现点击参数面板按钮显示或隐藏数据
01-20
当报表中列出数据太多时，想通过显示按钮隐藏明细数据只显示统计数据。如下图示例，那么该如何实现呢？本文以FineReport为例，来讲述JS如何实现点击参数面板按钮显示或隐藏数据。 打开报表 在参数面板添加一个标签控件，控件名为lable，设置标签控件不可见，控件值为“显示”。 在参数面板添加一个按钮控件，控件名为button，控件值为“只显示合计数据”，并添加点击事件。 编辑点击事件，添加下面的JavaScript代码： 点击参数面板空白处，将“点击查询前不显示报表内容”属性的勾去掉。 回到报表设计界面，右键B3单元格，添加条件属性，设置行高为0毫米，添加公式条件为$label =
根据class显示或隐藏多个div
weixin_33939843的博客
11-22 1482
引用一下jquery，然后function放head中 function test(){ $(".1").css("display","none"); //隐藏class为1 的div //控制显示的话 $(".1").css("display","block"); //$(".2").css("display","none"); 隐藏class为2的div } ...
那怎么用javascript来显示和隐藏呢
weixin_35755188的博客
01-10 1217
可以使用 JavaScript 的 style 属性来控制元素的显示和隐藏。如果你想隐藏元素，可以将该元素的 style 属性设置为 display:none，如下所示： element.style.display = 'none'; 要显示元素，可以将 style 属性设置为 display:block 或 display:inline，具体取决于你希望如何显示元素。 例如，假设你有一个名为 ...
通过class控制div的显示隐藏
wslzjr的博客
09-26 4929
场景： 同一个页面存在新增编辑功能，现需要根据一个选择框去控制其他输入框的显示隐藏。 （其实新增编辑应该合到一个页面中，但由于项目较老和其他客观因素导致分开写） 实现： 如下图的js中，通过(.extendMsg_class)控制选择框的选择，至于其他的输入框，也可以通过(.XXXclass)来找到进行控制。 （需注意，如果页面中存在多个需要控制的地方，通过class控制更方便...
js 简单实现隐藏和显示
weixin_33827965的博客
06-28 203
<html> <head> <meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv { width:200px; height:100px; line-height:100px; text-align:...
js隐藏div
weixin_33730836的博客
11-25 67
页面上有一个div，用JQuery隐藏<div id="hid_div" class="divID">解决方法：(1)用js：document.getElementById('hid_div').style.display="none";(2)jQuery:${.divID}.hid();ps:如果用方法（1）不行，估计是div标志为服务...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值