如果子元素在父元素里面用的是绝对定位,那么我们可以通过JQ脚本准确的计算出子元素距离父元素各位之间的距离,下面就是方法,供大家参考。

JQ获取子元素距离父元素各边的方法

JQ获取子元素距离父元素各大边的方法代码:

1、获取子元素距离父元素左边的方

$('xx').position().left

2、获取子元素距离父元素顶边的方法

$('xx').position().top

示例代码:

注意:只有子元素在父元素中,使用是为绝对定位,此方法才会有效果!

<style>
    .main{
        width:300px;
        height: 350px;
        background-color: bisque;
        position: relative;
    }
    .item{
        width: 150px;
        height: 200px;
        background-color: aquamarine;
        position: absolute;
        left: 10%;
        top:15%;
    }
</style>
<div class="main">
    这是父亲元素 :feiniaomy.com
    <div class="item">
        我是子元素!
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
//上边距离  52.5
console.log($('.item').position().top);
//左边距离 48 30
console.log($('.item').position().left);
//右边距离 120 (父元素的款 - 左边距离 - 子元素的宽)
console.log($('.main').width() - $('.item').position().left - $('.item').width() );
//下边距离 97.5 (父元素的高 - 上边距离 - 子元素的高)
console.log($('.main').height() - $('.item').position().top - $('.item').height() );
</script>