对于js中的offset和jquery中的offset()方法区别

最新推荐文章于 2025-01-21 00:00:00 发布

原创最新推荐文章于 2025-01-21 00:00:00 发布 · 484 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

博客聚焦于js中的offset和jquery中offset()方法的区别，在信息技术领域，了解这两种方法差异对前端开发有重要意义，能帮助开发者更精准地进行页面元素定位和操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div2{
            /* position:relative; */
            width:400px;
            height:400px;
            background:#0f0;
            margin-left:10px
        }
        #div3{
            width:300px;
            height:300px;
            background:#00f;
            margin-left:10px
        }
        #div4{
            width:200px;
            height:200px;
            background:#000;
            margin-left:10px;
        }
    </style>
</head>
<div id="div2">
    <div id="div3">
        <div id="div4"></div>
    </div>
</div>
</html>

//在父级元素有定位的情况下

console.log($("#div4").offset());	//{top: 0, left: 30}
console.log(document.querySelector("#div4").offsetLeft)	 //20


//在父级元素没有定位的情况下
console.log($("#div4").offset());	//{top: 0, left: 30}
console.log(document.querySelector("#div4").offsetLeft)	//30