打开关闭DIV窗口的简单例子

最新推荐文章于 2021-07-26 11:14:49 发布

sunjian1979

最新推荐文章于 2021-07-26 11:14:49 发布

阅读量666

点赞数

分类专栏： html/css/js 文章标签： JavaScript CSS HTML ViewUI

html/css/js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

看着别人可以打开或关闭DIV窗口，感觉比较好奇是怎么实现的，今天也稍微研究了一下。

html 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>打开关闭DIV例子</title>
<style type="text/css">
#div1 {
margin: 10px auto;
width: 300px;
height: 300px;
border: 2px #cccccc solid;
}
#div2 {
float: right;
background-color: yellow;
cursor: default;
}
#div3 {
clear: both;
margin: 50px auto;
}
</style>
<script type="text/javascript">
function openWin(){
if(!document.getElementById("div1")){
var div1 = document.createElement("div");
div1.id = "div1";
document.body.appendChild(div1);
var div2 = document.createElement("div");
div2.id="div2";
div2.onclick = closeWin;
div2.onmouseover=overDIV2;
div2.onmouseout=outDIV2;
div2.innerHTML = "DEL";
div1.appendChild(div2);
var div3 = document.createElement("div");
div3.id="div3";
div3.innerHTML="这是我们能看见的窗口，点一下DEL就消失了！";
div1.appendChild(div3);
}
}
function closeWin(){
var div=document.getElementById("div1");
if(div != null){
div.parentNode.removeChild(div);
}
}
function overDIV2(){
var div=document.getElementById("div2");
if(div != null){
div.style.backgroundColor="#FFFFFF";
}
}
function outDIV2(){
var div=document.getElementById("div2");
if(div != null){
div.style.backgroundColor="yellow";
}
}
</script>
</head>
<body>
<br>
<br>
<div align="center"><input type="button" value="打开窗口"
onclick="openWin()"></div>
<div id="div1">
<div id="div2" onclick="closeWin()" onmouseover="overDIV2()"
onmouseout="outDIV2()">DEL</div>
<div id="div3">这是我们能看见的窗口，点一下DEL就消失了！</div>
</div>
</body>
</html>