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

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

2023-11-17 0 645

正文:

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

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 获取子元素和父元素各边之间距离的方法

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 Jquery jquery获取子元素和父元素各边之间距离的方法 https://www.huizhanii.com/33805.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com

终身SVIP限时特惠


为回馈新老会员对本站的支持与厚爱

推出原价598元 现在仅需99元 有效期为永久

可享有免费下载本站98%VIP资源

即时活动 即时优惠 错过就再等一年

汇站网(huizhanii.com)

2024年即日


点我关闭