<!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>
留言列表
網站 & 部落格 (2)