您现在的位置: 365建站网 > 365文章 > javascript中offsetleft和offsetTop属性的用法

javascript中offsetleft和offsetTop属性的用法

文章来源:365jz.com     点击数:409    更新时间:2017-08-18 08:51   参与评论

此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的。

(1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离。
(2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离。

语法结构:

obj.offsetleft

特别说明:此属性是只读的,不能够赋值。

代码实例:

</>code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="author" content="http://www.softwhy.com/" />
  6. <title>蚂蚁部落</title>
  7. <style type="text/css">
  8. *{
  9. margin: 0px;
  10. padding: 0px;
  11. }
  12. #main{
  13. width:300px;
  14. height:300px;
  15. background:red;
  16. position:absolute;
  17. left:100px;
  18. top:100px;
  19. }
  20. #box{
  21. width:200px;
  22. height:200px;
  23. background:blue;
  24. margin:50px;
  25. overflow:hidden;
  26. }
  27. #inner{
  28. width:50px;
  29. height:50px;
  30. background:green;
  31. text-align:center;
  32. line-height:50px;
  33. margin:50px;
  34. }
  35. </style>
  36. <script type="text/javascript">
  37. window.onload=function(){
  38. var inner=document.getElementById("inner");
  39. inner.innerHTML=inner.offsetLeft;
  40. }
  41. </script>
  42. </head>
  43. <body>
  44. <div id="main">
  45. <div id="box">
  46. <div id="inner"></div>
  47. </div>
  48. </div>
  49. </body>
  50. </html>

上面的代码可以返回inner元素距离main元素的左侧的距离,因为main元素是第一个定位父辈元素。

</>code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="author" content="http://www.softwhy.com/" />
  6. <title>蚂蚁部落</title>
  7. <style type="text/css">
  8. *{
  9. margin: 0px;
  10. padding: 0px;
  11. }
  12. #main{
  13. width:300px;
  14. height:300px;
  15. background:red;
  16. margin:100px;
  17. }
  18. #box{
  19. width:200px;
  20. height:200px;
  21. background:blue;
  22. overflow:hidden;
  23. }
  24. #inner{
  25. width:50px;
  26. height:50px;
  27. background:green;
  28. text-align:center;
  29. line-height:50px;
  30. margin:50px;
  31. }
  32. </style>
  33. <script type="text/javascript">
  34. window.onload=function(){
  35. var inner=document.getElementById("inner");
  36. inner.innerHTML=inner.offsetLeft;
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. <div id="main">
  42. <div id="box">
  43. <div id="inner"></div>
  44. </div>
  45. </div>
  46. </body>
  47. </html>

上面的代码返回inner元素距离body元素左侧的尺寸。

ps:js中的offsetLeft属性具体有什么作用?

可以判断一个物体的跟document的左边距离,也就是浏览器左边缘。比如你写一个div 获取这个div之后alert(你的div.offsetLeft)就可以看到他现在距离浏览器左边的距离。当然你也可以用他给对象赋值,offset不单单只有Left 还有offsetTop offsetWidth offsetHeight 都是JS里很有用的属性。

获取offsetTop和offsetLeft值的js代码(兼容)

function offsetTop( elements ){
var top = elements.offsetTop;
var parent = elements.offsetParent;
while( parent != null ){
top += parent.offsetTop;
parent = parent.offsetParent;
};
return top;
};
function offsetLeft( elements ){
var left = elements.offsetLeft;
var parent = elements.offsetParent;
while( parent != null ){
left += parent.offsetLeft;
parent = parent.offsetParent;
};
return parent;
}; 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (409人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号