<!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> 


arrow
arrow
    全站熱搜

    Roger 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄