[.js] div 의 이동

click 누르면 div를 생성해서 특정 위치에 위치시킨다.

혜화초보 2017. 9. 6. 16:53

 

 


/*
click 누르면 div를 생성해서 특정 위치에 위치시킨다.
다시 누르면 위치 시켰단 div 를 제거한다.
*/


<html>
<head>


<style type="text/css">
 <!--
  #base1 {
  background-color: #DCDAD9;
  width: 100px;
  height: 100px;
  position:absolute;
  }
 //-->
 </style>


</head>


<script  language="javascript"  >
 
 /*
 add_div 를 실행하면 base1 아이디를 갖는 div 를 생성하고
 cal 이라는 아이디를 갖는 input 박스의 위치를 구해서 그 위치로
 base1 div 를 이동시킨다. 
 */
 
 var ppp = 0;
 
 function cal_exe(){
   if( ppp == 0 )
     add_div();
   else
     remove_div();   
 }
 
 function add_div(){
    var a1 = document.createElement('div');
    a1.innerHTML = " <div id='base1' >  </div> ";
    document.body.appendChild(a1);


    ppp += 1;


    var pTag = document.getElementById("cal");
    var pTag2 = document.getElementById("base1"); 
   
    pTag2.style.top = pTag.offsetTop  + pTag.offsetHeight ;   
    pTag2.style.left = pTag.offsetLeft;   
    
 }


 function remove_div(obj){
    ppp= 0;
    var pTag2 = document.getElementById("base1"); 
    pTag2.parentNode.removeChild( pTag2 );
 }




</script>
    <body>
        <div id="container">
        </div>
        <br><br><br><br><br><br> &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
        <input type='text'  id='cal'  >
        
        
        <a href="javascript:cal_exe();"  >bb</a>
    </body>


</html>