当前位置： 文江博客话题详情

js获取对象位置的方法

发布于 2022-10-15 08:52:23 字数 5326 浏览 20 评论 0

转：web开发

js获取对象位置的方法
scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

　　以上主要指IE之中，FireFox差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

　　测试代码：

CODE:

  1. [Copy to clipboard]
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
  7. <head>
  9. <head>
  11. <title> 代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 </title>
  13. <meta http-equiv="content-type" content="text/html; charset=gb2312" />
  15. <meta name="author" content="枫岩,CnLei.y.l@gmail.com">
  17. <meta name="copyright" content="http://www.cnlei.com" />
  19. <meta name="description" content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较" />
  21. <style type="text/css" media="all">
  23. body {font-size:14px;}
  25. a,a:visited {color:#00f;}
  27. #Div_CnLei {
  29. width:300px;
  31. height:200px;
  33. padding:10px;
  35. border:10px solid #ccc;
  37. background:#eee;
  39. font-size:12px;
  41. }
  43. #Div_CnLei p {margin:0;padding:10px;background:#fff;}
  45. </style>
  47. <script type="text/javascript">
  49. function Obj(s){
  51. return document.getElementByIdx(s)?document.getElementByIdx(s):s;
  53. }
  55. function GetClientWidth(o){
  57. return Obj(o).clientWidth;
  59. }
  61. function GetClientHeight(o){
  63. return Obj(o).clientHeight;
  65. }
  67. function GetOffsetWidth(o){
  69. return Obj(o).offsetWidth;
  71. }
  73. function GetOffsetHeight(o){
  75. return Obj(o).offsetHeight;
  77. }
  79. </script>
  81. </head>
  83. <body>
  85. <p>点击下面的链接:</p>
  87. <div id="Div_CnLei">
  89. <p><a href=http://bbs.chinaunix.net/"javascript:alert(GetClientWidth('Div_CnLei'));">GetClientWidth();</a> <a href=http://bbs.chinaunix.net/"javascript:alert(GetClientHeight('Div_CnLei'));">GetClientHeight();</a></p>
  91. <p><a href=http://bbs.chinaunix.net/"javascript:alert(GetOffsetWidth('Div_CnLei'));">GetOffsetWidth();</a> <a href=http://bbs.chinaunix.net/"javascript:alert(GetOffsetHeight('Div_CnLei'));">GetOffsetHeight();</a></p>
  93. </div>
  95. <div id="Description">
  97. <p><strong>IE6.0、FF1.06+：</strong><br />
  99. clientWidth = width + padding = 300+10×2 = 320<br />
  101. clientHeight = height + padding = 200+10×2 = 220<br />
  103. offsetWidth = width + padding + border = 300+10×2+10×2= 340<br />
  105. offsetHeight = height + padding + border = 200+10×2+10×2 = 240</p>
  107. <p><strong>IE5.0/5.5：</strong><br />
  109. clientWidth = width - border = 300-10×2 = 280<br />
  111. clientHeight = height - border = 200-10×2 = 180<br />
  113. offsetWidth = width = 300<br />
  115. offsetHeight = height = 200</p>
  117. </div>
  119. </body>
  121. </html>

复制代码

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

送君千里

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文