jquery获取子元素和父元素各边之间距离的方法

正文：

如果子元素在父元素中使用绝对定位，那么我们可以通过 JQ 脚本精确计算子元素和父元素之间的距离。以下是方法，供你参考。

JQ 得到子元素和父元素主边之间距离的方法代码:

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

//汇站网 https://www.huizhanii.com 
 $('xx').position().left 

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

//汇站网 https://www.huizhanii.com 
 $('xx').position().top 

示例代码：

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

//汇站网 https://www.huizhanii.com 
  <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>

本文章已结束，如转载请注明：汇站网 » jquery 获取子元素和父元素各边之间距离的方法