首页 > 其他 > 详细

06 - 获取元素到父元素、窗口的距离

时间:2019-08-23 01:32:14      阅读:121      评论:0      收藏:0      [点我收藏+]

一、获取元素到窗口的距离

1.距离顶部,左边的距离,jQuery方法:offset()

  - 返回或设置匹配元素相对于文档的偏移(位置)。

  - 获取:$(selector).offset()      设置:$(selector).offset(value)  value比如{top:100,left:0}

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 500px;
        height: 500px;
        margin: 40px 50px;
        border: 1px solid blue;
        position: relative;
    }
    .box {
        position: absolute;
        top: 50px;
        left: 100px;
        width: 200px;
        height: 300px;
        border: 1px solid red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
<script>
    // offset() 返回或设置匹配元素相对于文档的偏移(位置)。
    console.log($(‘.box‘).offset());  // {top: 91, left: 151}
    // 设置传入对象参数:{left: m, top: m}
    $(‘.box‘).offset({left:80, top: 80});
</script>

2.元素距离文档底部的距离

 

3.元素距离可视窗口底部的距离

二、 一些距离方法

  - $(document).height()  // 整个网页的文档高度

  - $(window).height();   // 浏览器可视窗口的高度

参考文章:jQuery获取文档高度和窗口高度汇总【https://blog.csdn.net/qq_21417123/article/details/80105620

三、获取元素到父元素的距离

 

06 - 获取元素到父元素、窗口的距离

原文:https://www.cnblogs.com/xinghong/p/11397465.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!