第十五节 jQuery获取元素的绝对位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
 7     <script type="text/javascript">
 8         $(function(){
 9             var $div = $('.box');
10             
11             $div.click(function(){
12                 var oPos = $div.offset();  // $div.offset()获取元素的绝对位置，返回的是一个object对象。
13                 alert(oPos.left);
14                 document.title = oPos.left;
15             });
16             console.log(oPos);
17             
18         });
19     </script>
20     <style type="text/css">
21         .box{
22             width: 200px;
23             height: 200px;
24             background-color: gold;
25             margin: 50px auto 0;
26         }
27     </style>
28 </head>
29 <body>
30     <div class="box"></div>
31 </body>
32 </html>