实现div隐藏可以通过设置display、visible和div的大小等实现隐藏效果。
CSS display 属性
display 属性规定元素应该生成的框的类型。值为none时，此元素不会被显示。
/示例/div{display:none;}
CSS visibility 属性
visibility 属性规定元素是否可见。值为hidden时表示元素是不可见的。
/示例/div{visible:hidden;}
提示:visible:hidden;和display:none;的区别是，即使不可见的元素也会占据页面上的空间。 "display" 属性可以用来创建不占据页面空间的不可见元素。(visible和display属性的其他可能值可在W3School查看)。
设置DIV的大小实现隐藏
将div的宽度和高度设置为零，也可以达到隐藏的效果。
/示例/div{
width：0px;
height:0px;
overflow:hidden;/规定当内容溢出元素框时隐藏。防止div大小设置为零，里面的文本却还是显示。/
}
将下面的代码拷贝并保存为一个html文件（如testhtml），然后用浏览器打开该html，测试效果。
先点击下文本框，然后点击文本框以外的地方以实现文本框失去焦点。<br/><br/>
<input type="text" name="test" onblur="showDiv();" id="test">
<div id="myDiv" style="display:none;width:160px;height:90px;background-Color:blue;margin-top:10px"></div>
<script type="text/javascript">
// 显示DIV，并执行定时器函数
function showDiv(){
documentgetElementById("myDiv")styledisplay = "block";
timeer_hideDiv();
}
// 隐藏DIV
function hideDiv(){
documentgetElementById("myDiv")styledisplay = "none";
}
// 定时器：20秒后执行隐藏DIV的函数
function timeer_hideDiv() {
windowsetTimeout("hideDiv()", 20000);
}
</script>
希望可以帮到你！
你应该在普通div上加onclick(模拟获取焦点)来实现你的需求。
<html>
<body>
<input type="test" onfocus='txtfocus()' />
<div id='div' style="display:none" >我是焦点DIV</div>
<div onclick='divFocus()'>普通div</div>
<script language="javascript" >
function txtfocus(){
documentgetElementById('div')styledisplay="block";
}
function divFocus(){
documentgetElementById('div')styledisplay="none";
}
</script>
</SCRIPT>
</body>
</html>
呵呵，我也遇到过同样的问题，一开始的想法是在d出的DIV上用onMouseout事件隐藏自己，如果这个DIV中没有其它内容的话是可以实现的，但如果在d出的div中嵌套有其它div或其它标签的话，就会有问题。记得我好像使用了一个笨办法，就是先获取这个d出的DIV的范围，同时获取鼠标的当前位置，当鼠标移出DIV的范围的时候，隐藏DIV。以下是这段代码，也共同期待有更好的办法。 还需要说明的是这段代码在IE上没问题，如果是FireFox的话，获取鼠标当前位置应该用：eventpageX|Y，这个问题在代码中加一个判断应该可以解决。
<script language="javascript" type="text/javascript">
documentonmousemove = mouseouthide;
//鼠标移出DIV范围时隐藏
function mouseouthide() {
var b=20;//加一点余量，否则当点击文本框时div没d出就被隐藏了
var obj = documentgetElementById("poplist"); //poplist是d出div的ID号
var t = documentbodyoffsetTop;
var l = documentbodyoffsetLeft;
var ol = l + objoffsetLeft-b;
var or = l + objoffsetLeft + objoffsetWidth + b;
var ot = t + objoffsetTop-b;
var ob = t + objoffsetTop + objoffsetHeight + b;
var x = eventclientX + documentbodyscrollLeft;
var y = eventclientY + documentbodyscrollTop;
if (x <= ol || x >= or || y <= ot || y >= ob)
objstyledisplay = "none";
}
</script>
/简单来说就是通过设置按钮的onclick事件来控制div的显示和隐藏。
//比如在css中先将div的display设置为"none",那么点击的时候就先查询display值是否为"none"，
//如果为"none"的话，就改为"block"，即显示div；如果不是"block"就改为"none"，隐藏div。
var
obutton
=
documentgetelementbyid("button");//假设html中按钮id="button"，并取得。
var
odiv
=
documentgetelementbyid("div");//假设html中div的id="div"，并取得。
obuttononclick=function(){
if
(odivstyledisplay
==
"none"){
odivstyledisplay
=
"block";
}else
{
odivstyledisplay
=
"none";
}
}
//还有就是用三元 *** 作符更简洁一些。
以上就是关于html Div隐藏问题全部的内容，包括:html Div隐藏问题、文本框失去焦点时，隐藏的div显示，但是div20秒隐藏请教高手、javascript 焦点问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）