js获取div的坐标

html中最常使用的控件就是div了,那么如何获取div的坐标呢?

如何方法可以实现.

Js代码  

  1. /*** 
  2.  * 获取div的坐标 
  3.  * @param divObj 
  4.  * @returns {{width: number, height: number, left: *, top: Window}} 
  5.  */  
  6. com.whuang.hsj.divCoordinate=function(divObj){  
  7.     if(typeof divObj == 'string'){  
  8.         divObj=com.whuang.hsj.$$id('divObj');  
  9.     }  
  10.     return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,  
  11.         'x':divObj.offsetLeft,'y':divObj.offsetTop,  
  12.         'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};  
  13. }  
  14. // Cross browser gets the position of scroll  
  15. com.whuang.hsj.getScroll=function(){  
  16.     return {  
  17.         top:document.documentElement.scrollTop || document.body.scrollTop,  
  18.         left:document.documentElement.scrollLeft || document.body.scrollLeft  
  19.     }  
  20. }  

 

com.whuang.hsj.divCoordinate()方法介绍

功能:返回div坐标;

参数:div对象或div的id(字符串);

返回值:对象,有六个属性:

width:div自身的宽度;

height:div自身的高度;

x:div左上角的坐标x;

y:div左上角的坐标y;

scrollLeft:水平滚动条的位置

scrollTop:竖直滚动条的位置

测试页面:

Html代码  

  1. <html>  
  2. <head lang="en">  
  3.     <meta charset="UTF-8">  
  4.     <title></title>  
  5.     <script type="text/javascript" src="js/jquery-1.10.1.js"></script>  
  6.     <script type="text/javascript" src="js/common_util.js"></script>  
  7.     <script type="text/javascript">  
  8.   
  9.   
  10.           
  11.     function run(){  
  12.             var loc=com.whuang.hsj.divCoordinate('divObj');  
  13. //            document.writeln();  
  14.             com.whuang.hsj.$$id('text22').innerHTML="width:"+loc.width+" &nbsp; , &nbsp; height:"+loc.height+" &nbsp;, &nbsp;scrollTop:"+loc.scrollTop+" &nbsp;, &nbsp;scrollLeft:"+loc.scrollLeft+" &nbsp;,&nbsp;x:"+loc.x+" &nbsp;,&nbsp; y:"+loc.y;  
  15.         }  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.   
  20. <div style="width: 599px;height: 499px;background-color: mediumvioletred;" id="divObj"  >  
  21.   
  22. </div>  
  23. <br>  
  24. <input type="button" value="run" onclick="run();" >  
  25. <div  id="text22" style="width: 400px;" >  
  26.     </div>  
  27. </body>  
  28. </html>  

 运行结果:

 

参考:

http://hw1287789687.iteye.com/admin/blogs/2156296

http://hw1287789687.iteye.com/admin/blogs/2155772

时间： 2024-07-31 13:49:50

js获取div的坐标的相关文章

javascript-如何用JS获取div下的子div

问题描述 如何用JS获取div下的子div 有多个独立的外层div,每个外层div内嵌一个内层的div,内层div在显示在外层div的下部.我要的效果是,当鼠标移入到一个外层div中时,改变这个外层div内的那个内层div.用Js怎么写代码?求大神指导 解决方案 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

JS获取DIV在BODY内的绝对坐标

JS获取DIV在BODY内的绝对坐标 function   getAbsPoint(e)      {          var   x   =   e.offsetLeft,   y   =   e.offsetTop;          while(e=e.offsetParent)        {           x   +=   e.offsetLeft;             y   +=   e.offsetTop;       }        alert("x:"

js 获取div高度并重新设置div高度与宽度

 js 获取div高度并重新设置div高度与宽度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <me

js获取div内容与div值

这是在没有利用js更改我的值之前 js获取div内容 修改我的值 修改我的值

js 获取div内容再修改div内容

js 获取div内容再修改div内容 <html xmlns="http://www.jzread.com/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js 获取div内容再修改div内容</title> <script langu

js 获取div宽度代码

<input type="button" onclick="calculate()" value="test">   <script>  function calculate(){   var divs = document.getelementbyid("showtemptext");   divs.innerhtml="wuao ahshahsah  <font size=6>

js获取div高度的代码_javascript技巧

<style type="text/css"> <!-- #top {     color: #FFFFFF;     background-color: #FF0000;     text-align: left;     text-indent: 24px;     width: 780px;     line-height: 24px;     font-size: 12px;     padding-right: 10px;     padding-left:

js实现获取div坐标的方法_javascript技巧

本文实例讲述了js实现获取div坐标的方法.分享给大家供大家参考,具体如下: html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如下方法可以实现: /*** * 获取div的坐标 * @param divObj * @returns {{width: number, height: number, left: *, top: Window}} */ com.whuang.hsj.divCoordinate=function(divObj){ if(typeof divObj =

js下获取div中的数据的原理分析_javascript技巧

关于从中学到的知识: document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid("ddhdh").innerTEXT 可以获取到div中的文本数据,不会获取到标签...但是只是在IE和OPERA中使用 document.getElementById("text").textContent 用于在