通过js隐藏或者显示一个DIV

最新推荐文章于 2024-03-06 09:53:52 发布

小K黑哥

最新推荐文章于 2024-03-06 09:53:52 发布

阅读量858

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/kdm8866/article/details/9011815

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的网页效果——通过按钮控制一个居中的黑色正方形DIV显示与隐藏的方法。利用JavaScript实现DOM元素的动态显示与隐藏切换，并使用HTML与CSS进行页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title></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:200px;
width:200px;
display:none;
}

</style>
</head>

<body>
<input type="button" id="butn" value="显示/隐藏" οnclick="toggle('div1')" />
<center>
<div id="div1"></div></center>
居中的DIV
</body>
</html>