• jquery学习:获取位置position(),offset(),scrollTop困惑


    学习jquery定位的三个函数:offset,position,scrollTop/scrollLeft感觉困惑较大

    (1)offset:获取当前元素相对于文档的高度。只对可见元素有效。

      (2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移。

     (3)scrollTop/scrollLeft是分别获取元素滚动条距顶端的距离。

    测试代码:

    <body height="1500px">
    <div style="position:relative;margin-top:1000px;height:300px;border:1px solid #0C6;">
    <p style="margin:50px;">compute my height</p>
    </div>
    </body>
    

     在firebug中得到的结果为:

    $('div').offset() 
    top:1000;left:8;
    $('p').offset()
    top:1051;left:9;
    $('div').scrollTop()=0;$('div').scrollLeft()=0;
    $('p').position();
    top:0 ;left:0;

     这个结果感觉很奇怪,第一二个结果还是意料之中,但是第三个是将滚动条拉到最下方的时算出的结果。

    改了css的几个属性,更奇怪的事情出现了。

    <body style="height:1500px;">
    <div style="position:relative;margin-top:1000px;height:300px;">
    <p style="padding:50px;">compute my height</p>
    </div>
    </body> 
    $('div').offset() 
    top:1000;left:8;
    $('p').offset()
    top:1000;left:8;
    $('div').scrollTop()=0;$('div').scrollLeft()=0;
    $('p').position();
    top:0 ;left:0;
     

    padding不起作用了!!!

    继续做修改:

    <body style="height:1500px;">
    <div style="position:relative;margin-top:1000px;height:300px;border:1px solid #666;">
    <p style="padding:50px;">compute my height</p>
    </div>
    </body>
    
    $('div').offset() 
    top:1000;left:8;
     $('p').offset()
     top:1017;left:9;
    $('div').scrollTop()=0;
    $('div').scrollLeft()=0;
    $('p').position();
    top:0 ;left:0;

     天呀,加了一个border而已,怎么p的offset.top变成了1017。。怎么可能得到这样的数字,打破脑袋都想不清楚啊。。。

  • 相关阅读:
    堆和栈的区别
    今天开通博客了!
    【转】Perl中的正则表达式
    【转】Windows server 2008远程桌面轻松搞定
    【转】彻底删除0KB顽固文件或文件夹的方法
    【转】Java URL Encoding and Decoding
    【转】一个女留学生在美国的七年
    【转】风雨20年:我所积累的20条编程经验
    【转】深入浅出REST
    【转】Python正则表达式指南
  • 原文地址:https://www.cnblogs.com/qiyueshihuang/p/2230693.html
Copyright © 2020-2023  润新知