web前端,js實現div隱藏顯示
阿新 • • 發佈：2019-01-31
<!DOCTYPE html>
<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:400px;
width:400px;
display:none;
}
</style>
</head>
<body>
<input type="button" id="butn" value="顯示/隱藏" onclick="toggle('div1')" />
<center>
<div id="div1"></div>
</center>
居中的DIV
</body>
</html>
<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:400px;
width:400px;
display:none;
}
</style>
</head>
<body>
<input type="button" id="butn" value="顯示/隱藏" onclick="toggle('div1')" />
<center>
<div id="div1"></div>
</center>
居中的DIV
</body>
</html>