js控制 div显示隐藏 |
您所在的位置：网站首页 › div隐藏与显示互相调用 › js控制 div显示隐藏 |
|
显示与隐藏
function dis(b){
document.getElementById('qq').style.display = (document.getElementById('qq').style.display=="block") ? "none" : "block";
b.value = (b.value=="显示") ? "隐藏" : "显示";
}
#qq {display:none}
内容,这个表格是嵌套在id是"qq"的DIV中的
隐藏和显示div的方式有两种： 方式1：隐藏后仍占有页面空间，显示空白 div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白. style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示 方式2：隐藏后释放占用的页面空间 通过设置display属性可以使div隐藏后释放占用的页面空间. style="display: none;" document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1").style.display="";//显示 注意： 使用第二方式更人性化，但是，用div.style.display="none"隐藏会引起，div里面的东西休眠，里面的事件就不响应了。 body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:80%;} p{margin-left:5px; font-size:14px;} JS 实现显示和隐藏div（以百度地图为例）点击地图右上角的图标，实现显示或隐藏div内容 // 百度地图初始化 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.3964,39.9093), 15); map.enableScrollWheelZoom(); //添加自定义的覆盖物 function ZoomControl_Center(){ this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT; this.defaultOffset = new BMap.Size(20, 10); } ZoomControl_Center.prototype = new BMap.Control(); ZoomControl_Center.prototype.initialize = function(map){ var div = document.createElement("div"); div.innerHTML = ""; div.style.cursor = "pointer"; div.onclick = function(){ //添加响应事件 var x = document.getElementById("userInfoDiv"); //方式1， /* if(x.style.display=="none"){ x.style.display="block"; //显示 }else{ x.style.display="none"; //隐藏 } */ //方式2，原生简写（三元运算） //x.style.visibility=x.style.visibility=="hidden"?"visible":"hidden"; //方式3，jquery if($("#userInfoDiv").css("display")=='none'){//如果是隐藏的 $("#userInfoDiv").css("display","block");//display属性设置为block（显示） }else{ $("#userInfoDiv").css("display","none"); } } map.getContainer().appendChild(div); return div; }; map.addControl(new ZoomControl_Center()); openUserInfoDiv(); //覆盖层显示内容 function openUserInfoDiv(){ var newDiv = document.createElement("div"); newDiv.id = "userInfoDiv"; newDiv.style.position = "absolute"; newDiv.style.zIndex = "9999"; newDiv.style.width ="150px"; newDiv.style.top = "50px"; newDiv.style.right = "0px"; newDiv.style.background = "#ffffff"; newDiv.style.opacity = "0.9"; newDiv.style.padding = "5px"; newDiv.style.display="none"; //隐藏 //newDiv.style.visibility="hidden"; //隐藏 var routeName = "测试路线"; var empName = "张三"; var taskTimeStart = "2016-12-19 19:00:00"; var HTMLstr = "" +""+routeName+"" +"" +"执行人员："+empName+"" +"执行时间:"+taskTimeStart+"" +""; newDiv.innerHTML = HTMLstr; document.getElementById("allmap").appendChild(newDiv); } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |