jquery offset()和position()的区别

Posted xxcxxc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery offset()和position()的区别相关的知识，希望对你有一定的参考价值。

<script src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li").click(function () {
                $(this).toggleClass(\'red\');
            })
            console.log($("ul").offset().top)
            console.log($("ul").position().top)
        })
    </script>
</head>
<body>
<div style="position: absolute;top: 100px;left: 100px;">
    <ul style="position: absolute;top: 10px;left: 10px;">
        <li class="red">ads</li>
        <li>ads</li>
        <li>ads</li>
        <li>ads</li>
        <li>ads</li>
    </ul>
</div>

结果：

可以看出offset()是相对于body来说的，而position是相对于父元素来说的

以上是关于jquery offset()和position()的区别的主要内容，如果未能解决你的问题，请参考以下文章

jQuery中position()与offset()区别

小5聊jquery基础之offset和position的topleft值

各种位置和高度计算:.position().offset().outerHeight().scrollTop.scrollHeight.clientHeight

jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

jquery的offset与position的区别

jQuery之offset,position