萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 一個JavaScript操作元素定位元素的實例

一個JavaScript操作元素定位元素的實例

 操作元素定位元素,用js來實現是個不錯的選擇,下面有個示例,需要的朋友可以看看

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>每天一個JavaScript實例-操作元素定位元素</title>  <style>  div#a{  width:500px;  }  div{  border:1px solid #000;  padding:10px;  }  #cursor{  position:absolute;  background-color:#ff0;  width:20px;  height:20px;  left:50px;  top:300px;  }  </style>  <script>  function positionObject(obj){  var rect = obj.getBoundingClientRect();  return [rect.left,rect.top];  }  window.onload = function(){  var tst = document.documentElement.getBoundingClientRect();  alert(tst.top);  var cont = 'A';  var cursor = document.getElementById("cursor");  while(cont){  cont = prompt("where do you want to move the cursor block?","A");  if(cont){  cont = cont.toLowerCase();  if(cont == "a"||cont=="b"||cont=="c"){  var elem = document.getElementById(cont);  var pos = positionObject(elem);  console.log(pos);  cursor.setAttribute("style","top:"+pos[1]+"px;"+"left:"+pos[0]+"px");  }  }     }  }  </script>  </head>     <body>     <div id = "a">  <p>A</p>  <div id ="b">  <p>B</p>  <div id="c">  <p>C</p>  </div>  </div>  </div>  <div id="cursor">     </div>  </body>  </html>
copyright © 萬盛學電腦網 all rights reserved