怎么用JS隐藏一个DIV层?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么用JS隐藏一个DIV层?相关的知识,希望对你有一定的参考价值。

<script type="text/javascript">
function fuckie()
document.getElementById("ie-hidden").display = "none";

</script>
自己写的,无效!

设置div对象的style.display属性为"none"即可隐藏该节点,设置属性为”block“可以显示之。实例演示如下:

1、html结构

<input type="button" value="隐藏" onclick="fun(this)">
<div id="test">我是一个DIV</div>

2、javascript代码

function fun(obj)
var div = document.getElementById("test");
if(obj.value=="隐藏")
div.style.display = "none";
obj.value = "显示";
 else 
div.style.display = "block";
obj.value = "隐藏";

3、效果演示

参考技术A document.getElementById("ie-hidden").style.display = "none";
你那个没写完整 缺个style
fuckie名字起得不错追问

我style之后Chrome就报错

参考技术B <script type="text/javascript">
$(document).ready(function()
$("#ie-hidden").hide();
);
</script>
直接这样就好了追问

搞定,谢谢!

$(document).ready(function()
$("#ie-hidden").hide();
);

最后高呼一声,泥马万恶的IE!!!!

参考资料:http://www.w3school.com.cn/jquery/jquery_effects.asp

本回答被提问者采纳
参考技术C div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白

style="visibility: none;"

document.getElementById("typediv1").style.visibility="hidden";//隐藏

document.getElementById("typediv1").style.visibility="visible";//显示

通过设置display属性可以使div隐藏后释放占用的页面空间,如下

style="display: none;"

document.getElementById("typediv1").style.display="none";//隐藏

document.getElementById("typediv1").style.display="";//显示

此JS代码中,没有用try——Catch捕获错误,代码如下:

<script language="javascript">
//创建一个showhidediv的方法,直接跟ID属性
function showhidediv(id)
var sbtitle=document.getElementById(id);
if(sbtitle)
if(sbtitle.style.display=='block')
sbtitle.style.display='none';
else
sbtitle.style.display='block';



</script>
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div,ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->

onMouseMove='showhidediv("msg")'; 这里是鼠标动作,可以替换成Click或其他!

再次升级,做两个层之间的切换:

<script language="javascript">
//创建一个showhidediv的方法,直接跟ID属性
function showhidediv(id)
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name')
if (name.style.display=='none')
age.style.display='none';
name.style.display='block';

else
if (age.style.display=='none')
name.style.display='none';
age.style.display='block';



</script>
<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name:</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age:</div>
<div id="msg_1" style="display:none;float:left;">林雨林</div>
<div id="msg_2" style="display:none;float:left;">18</div>
参考技术D 你没有调用<script type="text/javascript">
function fuckie()
document.getElementById("ie-hidden").display = "none";

fuckie();
</script>追问

我改用jQuery了,加上调用还是不行:

function fuckie()
$(document).ready(function()
$("#ie-hidden").css("display","none");
);
fuckie();

追答

xuliang5535 他回答的是对的

js怎么设置div层左边距 及与顶部边距

参考技术A js设置style属性时。将“-”去掉,“-”后的字母大写。
如:左边距 margin-left .用js 写就是 style.marginLeft='34px';

以上是关于怎么用JS隐藏一个DIV层?的主要内容,如果未能解决你的问题,请参考以下文章

怎么用JS控制多个DIV的显示和隐藏问题

js怎么设置div层左边距 及与顶部边距

.net DIV层得隐藏..

js怎么实现点击div区域外任意位置,使这个div隐藏?

怎么用js显示隐藏div

js中如何判断一个层是不是隐藏