一个JavaScript操作元素定位元素的实例
操作元素定位元素,用js来实现是个不错的选择,下面有个示例,需要的朋友可以看看
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>每天一个JavaScript实例-操作元素定位元素</title> <style> div#a{ width:500px; } div{ border:1pxsolid#000; padding:10px; } #cursor{ position:absolute; background-color:#ff0; width:20px; height:20px; left:50px; top:300px; } </style> <script> functionpositionObject(obj){ varrect=obj.getBoundingClientRect(); return[rect.left,rect.top]; } window.onload=function(){ vartst=document.documentElement.getBoundingClientRect(); alert(tst.top); varcont='A'; varcursor=document.getElementById("cursor"); while(cont){ cont=prompt("wheredoyouwanttomovethecursorblock?","A"); if(cont){ cont=cont.toLowerCase(); if(cont=="a"||cont=="b"||cont=="c"){ varelem=document.getElementById(cont); varpos=positionObject(elem); console.log(pos); cursor.setAttribute("style","top:"+pos[1]+"px;"+"left:"+pos[0]+"px"); } } } } </script> </head> <body> <divid="a"> <p>A</p> <divid="b"> <p>B</p> <divid="c"> <p>C</p> </div> </div> </div> <divid="cursor"> </div> </body> </html>