獲取 HTML 元素的位置坐標(biāo)

獲取 HTML 元素的位置坐標(biāo)，可以使用 JavaScript 中的 DOM 操作來(lái)實(shí)現(xiàn)。下面是一個(gè)示例代碼，展示如何使用 JavaScript 獲取指定類(lèi)名的元素的位置坐標(biāo)：

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

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

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

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

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

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

請(qǐng)注意，獲取的位置坐標(biāo)是相對(duì)于視口（viewport）的坐標(biāo)，而不是相對(duì)于整個(gè)頁(yè)面的坐標(biāo)。如果需要獲取相對(duì)于頁(yè)面的坐標(biāo)，可以結(jié)合 window.scrollX 和 window.scrollY 屬性進(jìn)行計(jì)算。

.獲取元素在文檔上的坐標(biāo)

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];
 //修復(fù)ie6 7 下的瀏覽器邊框也被算在 boundingClientRect 內(nèi)的 bug
 var deviation = html.getBoundingClientRect();
 //修復(fù) ie8 返回 -2 的 bug
 deviation = { //FF 不允許修改返回的對(duì)象
 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.舉例如下：

近在做一個(gè)微信端的應(yīng)用，其中有一個(gè)功能是這樣的功能：不管怎么移動(dòng)百度地圖都能獲取到屏幕中心點(diǎn)的坐標(biāo)。這種功能在ios端和android端通過(guò)一些邏輯計(jì)算很容易就實(shí)現(xiàn)了，但是在web端想要?jiǎng)討B(tài)的獲取地圖屏幕中心點(diǎn)的坐標(biāo)，通過(guò)計(jì)算就不是那么容易實(shí)現(xiàn)的了。通過(guò)翻找百度地圖手冊(cè)收發(fā)現(xiàn)百度地圖在js接口中提供的有一個(gè)方法，下面只列出關(guān)鍵性的代碼：

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

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

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

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

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

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

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

//根據(jù)中心點(diǎn)坐標(biāo)添加彈跳動(dòng)畫(huà)marker

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

var marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注

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

marker.setAnimation(BMAP_ANIMATION_BOUNCE);