獲取 HTML 元素的位置坐標

獲取 HTML 元素的位置坐標，可以使用 JavaScript 中的 DOM 操作來實現。下面是一個示例代碼，展示如何使用 JavaScript 獲取指定類名的元素的位置坐標：

htmlCopy code
<!DOCTYPE html>
<html>
<body>
  <div class="my-element">This is a div element.</div>

  <script>
    // 獲取具有指定類名的元素
    var element = document.querySelector('.my-element');

    // 獲取元素的位置信息
    var rect = element.getBoundingClientRect();

    // 輸出元素的位置坐標
    console.log('元素的左上角坐標：', rect.left, rect.top);
    console.log('元素的右下角坐標：', rect.right, rect.bottom);
    console.log('元素的寬度和高度：', rect.width, rect.height);
  </script>
</body>
</html>

在上述代碼中，我們首先使用 querySelector() 方法獲取具有指定類名 .my-element 的元素。然后，使用 getBoundingClientRect() 方法獲取該元素的位置信息，返回一個包含左上角坐標、右下角坐標、寬度和高度等屬性的 DOMRect 對象。

最后，我們使用 console.log() 方法將元素的位置坐標輸出到控制臺。您可以根據實際需要使用這些坐標信息。

請注意，獲取的位置坐標是相對于視口（viewport）的坐標，而不是相對于整個頁面的坐標。如果需要獲取相對于頁面的坐標，可以結合 window.scrollX 和 window.scrollY 屬性進行計算。

.獲取元素在文檔上的坐標

function DocuemntHtmlPageXY (elem) {
 var rect = elem.getBoundingClientRect();
 var scrollTop = window.scrollTop || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0;
 var scrollLeft = window.scrollLeft || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft || 0;
 var html = document.documentElement || document.getElementsByTagName_r('html')[0];
 //修復ie6 7 下的瀏覽器邊框也被算在 boundingClientRect 內的 bug
 var deviation = html.getBoundingClientRect();
 //修復 ie8 返回 -2 的 bug
 deviation = { //FF 不允許修改返回的對象
 left: deviation.left < 0 ? 0 : deviation.left,
 top: deviation.top < 0 ? 0 : deviation.top
 };
 return {
 left: rect.left + scrollLeft - deviation.left,
 top: rect.top + scrollTop - deviation.top
 };
 }

2.舉例如下：

近在做一個微信端的應用，其中有一個功能是這樣的功能：不管怎么移動百度地圖都能獲取到屏幕中心點的坐標。這種功能在ios端和android端通過一些邏輯計算很容易就實現了，但是在web端想要動態的獲取地圖屏幕中心點的坐標，通過計算就不是那么容易實現的了。通過翻找百度地圖手冊收發現百度地圖在js接口中提供的有一個方法，下面只列出關鍵性的代碼：

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.4035,39.915), 14);

var bs = map.getBounds(); //獲取可視區域

var bssw = bs.getSouthWest(); //可視區域左下角

var bsne = bs.getNorthEast(); //可視區域右上角

//alert("當前地圖可視范圍是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);

var pt = bs.getCenter(); //獲取地圖中心點

//根據中心點坐標添加彈跳動畫marker

var point = new BMap.Point(pt.lng, pt.lat);

var marker = new BMap.Marker(point); // 創建標注

map.addOverlay(marker);// 將標注添加到地圖中

marker.setAnimation(BMAP_ANIMATION_BOUNCE);