jQuery——座標值的設定與獲取
阿新 • • 發佈：2019-01-25
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>座標值的設定與獲取</title> <style> *{ margin: 0; padding: 0; } .bigBox{ width: 150px; height: 150px; background-color: lawngreen; position: relative; top: 50px; left: 50px; } .box{ width: 100px; height: 100px; background-color: yellow; } </style> <script src="jquery-3.3.1.js"></script> <script> $(document).ready(function () { //offset 設定座標值 $("button:first").click(function () { var txtTop = $("#txtTop").val(); var txtLeft = $("#txtLeft").val(); $(".box").offset({top: txtTop, left: txtLeft}); }); //offset 獲取座標值,距離頁面上邊、左邊的距離，與父元素子元素的相對位置無關 $("button:eq(1)").click(function () { console.log("距離頁面上部的距離：" + $(".box").offset().top); console.log("距離頁面左部的距離：" + $(".box").offset().left); }); // position 獲取座標值，當父元素相對定位、絕對定位或固定定位時，利用position獲得的時相對於父元素的上邊和左邊的距離 $("button:eq(2)").click(function () { console.log("距離頁面上部的距離：" + $(".box").position().top); console.log("距離頁面左部的距離：" + $(".box").position().left); }); }); </script> </head> <body> <label for="txtTop">Top: </label><input type="text" id="txtTop"/> <label for="txtLeft">Left: </label><input type="text" id="txtLeft"/> <button>設定座標值</button> <button>offset 獲取座標值</button> <button>position 獲取座標值</button> <div class="bigBox"> <div class="box"></div> </div> </body> </html>
注意：
1、offset 設定座標值後，元素自動就變成相對定位了。
2、offset 獲取座標值，得到的是距離頁面上邊、左邊的距離，與父元素定位狀態、父元素子元素的相對位置無關
3、position 獲取座標值，當父元素相對定位、絕對定位或固定定位時，利用position獲得的是相對於父元素的上邊和左邊的距離，當父元素無定位時，功能與offset 一樣，得到的是距離頁面上邊、左邊的距離。