jQuery 源码解析(二十七) 样式操作模块坐标详解

2021-02-08 作者：匿名阅读：1523次

前言

本文重点解决jQuey源码解析(二十七)样式操作模块坐标详解问题,希望能够帮助到你

样式操作模块可用于管理DOM元素的样式、坐标和尺寸，本节讲解一下坐标这一块。

对于坐标来说，jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标，还有offsetParent获取最近的定位祖先元素，position用于获取获取第一个匹配元素相对于最近定位祖先元素的坐标，如下:

offset(options) 　　 ;返回匹配元素集合中的一个元素的文档坐标，或者设置每个元素的文档坐标,;不能带单位，默认是px，有两种使用方法:
- offset() ;返回第一个匹配元素的文档坐标
- offset(val) ;设置每个匹配的元素的文档坐标

offsetParent(options) 　　 ;获取最近的定位祖先元素
position() 　　 ;获取第一个匹配元素相对于最近定位祖先元素的坐标 ;如果是body元素则返回{ top: 0, left: 0 }。

也就是说如果不传递参数则获取第一个匹配元素的文档坐标，如果传递了参数(含有left、top的对象)，则设置每个匹配元素的坐标.

举个栗子:

writer by:大沙漠 QQ:22969969

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
    <style>
        *{margin:0;padding:0;}
        div{margin:20px;width: 200px;height: 180px;position: relative;padding-top: 20px;background: #c38;}
        h1{margin:10px;color: #333;}
    </style>
</head>
<body>
    <div>
        <h1>123</h1>
    </div>
    <button id="b1">获取h1元素的文档坐标</button><br/>
    <button id="b2">获取h1元素最近的定位祖先元素</button><br/>
    <button id="b3">获取h1元素离最近定位祖先元素的坐标</button><br/>
    <button id="b4">设置h1元素的文档坐标</button>
    <p></p>
    <script>
        $('#b1').click(()=>{                    //获取h1元素的文档坐标
            console.log( $('h1').offset() )
        })
        $('#b2').click(()=>{                    //获取h1元素最近的定位祖先元素,也就是div元素
            console.log( $('h1').offsetParent() )
        })
        $('#b3').click(()=>{                    //获取h1元素离最近定位祖先元素的坐标，也就是相对div元素的坐标
            console.log( $('h1').position() )
        })        
        $('#b4').click(()=>{                    //设置h1元素的文档坐标,相对于整个文档的
            $('h1').offset({top:'10',left:'10'})
        })
    </script>
</body>
</html>