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

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

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();

    // 輸出元素的位置坐標(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() 方法獲取具有指定類名 .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è)頁面的坐標(biāo)。如果需要獲取相對(duì)于頁面的坐標(biāo)，可以結(jié)合 window.scrollX 和 window.scrollY 屬性進(jìn)行計(jì)算。

lt;!DOCTYPE html>

<head>

</head>

<body>

function mousePosition(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mousePosition(ev);

document.getElementById('xxx').value = mousePos.x;

document.getElementById('yyy').value = mousePos.y;

}

document.onmousemove = mouseMove;

</script>

X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />

</body>

</html>

注釋：

1.documentElement 屬性可返回文檔的根節(jié)點(diǎn)。

2.scrollTop() 為滾動(dòng)條向下移動(dòng)的距離

3.document.documentElement.scrollTop 指的是滾動(dòng)條的垂直坐標(biāo)

4.document.documentElement.clientHeight 指的是瀏覽器可見區(qū)域高度

DTD已聲明的情況下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在頁面中添加這行標(biāo)記的話

document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?document.documentElement.clientHeight ==> 可見區(qū)域高度

Firefox

document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop ==> 瀏覽器滾動(dòng)部分高度
document.body.scrollTop ==>始終為0
document.documentElement.clientHeight ==>瀏覽器可視部分高度
document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度

Chrome

document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop==> 始終為0
document.body.scrollTop==>瀏覽器滾動(dòng)部分高度
document.documentElement.clientHeight ==> 瀏覽器可視部分高度
document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度

瀏覽器所有內(nèi)容高度即瀏覽器整個(gè)框架的高度，包括滾動(dòng)條卷去部分+可視部分+底部隱藏部分的高度總和

瀏覽器滾動(dòng)部分高度即滾動(dòng)條卷去部分高度即可視頂端距離整個(gè)對(duì)象頂端的高度。

綜上

1、document.documentElement.scrollTop和document.body.scrollTop始終有一個(gè)為0，所以可以用這兩個(gè)的和來求scrollTop

2、scrollHeight、clientHeight 在DTD已聲明的情況下用documentElement，未聲明的情況下用body

clientHeight
 在IE和FF下，該屬性沒什么差別，都是指瀏覽器的可視區(qū)域，即除去瀏覽器的那些工具欄狀態(tài)欄剩下的頁面展示空間的高度。

PageX和clientX

PageX:鼠標(biāo)在頁面上的位置,從頁面左上角開始,即是以頁面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化

clientX:鼠標(biāo)在頁面上可視區(qū)域的位置,從瀏覽器可視區(qū)域左上角開始,即是以瀏覽器滑動(dòng)條此刻的滑動(dòng)到的位置為參考點(diǎn),隨滑動(dòng)條移動(dòng) 而變化.

可是悲劇的是,PageX只有FF特有,IE則沒有這個(gè)，所以在IE下使用這個(gè)：

PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)

scrollTop代表的是被瀏覽器滑動(dòng)條滾過的長度

offsetX:IE特有,鼠標(biāo)相比較于觸發(fā)事件的元素的位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點(diǎn),如果有boder`,可能出現(xiàn)負(fù)值

只有clientX和screenX 皆大歡喜是W3C標(biāo)準(zhǔn).其他的,都糾結(jié)了.

最給力的是，chrome和safari一條龍通殺!完全支持所有屬性

js拖拽效果

<!doctype html>
<html lang="zn-CN">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
 <style type="text/css">
 #login{
 height: 100px;
 width: 100px;
 border: 1px solid black;
 position: relative;
 top:200px;
 left: 200px;
 background: red;
 }
 </style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript">
 var oDiv = document.getElementById("login");
 oDiv.onmousedown = function(e){
 var e = e || window.event;//window.event兼容IE,當(dāng)事件發(fā)生時(shí)有效
 var diffX = e.clientX - oDiv.offsetLeft;//獲取鼠標(biāo)點(diǎn)擊的位置到所選對(duì)象的邊框的水平距離
 var diffY = e.clientY - oDiv.offsetTop;
 document.onmousemove = function(e){ //需設(shè)為document對(duì)象才能作用于整個(gè)文檔
 var e = e||window.event;
 oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所選對(duì)象的邊框到瀏覽器左側(cè)距離
 oDiv.style.top = e.clientY -diffY + 'px';
 };
 document.onmouseup = function(){
 document.onmousemove = null;//清除鼠標(biāo)釋放時(shí)的對(duì)象移動(dòng)方法
 document.onmouseup = null;
 }
 }
</script>
</body> 
</html>

offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。

eb頁面元素定位有常用以下幾種方式。

1.id，唯一標(biāo)識(shí)符，還有一個(gè)name也可以用

WebElement input = driver.findElement(By.id("kw"));

2.name，給服務(wù)器用的

WebElement input = driver.findElement(By.name("wd"));

String value = input.getAttribute("maxlength");

System.out.println(value);

3.tagName,標(biāo)簽名（頻率比較低），查找列表-->爬蟲

List<WebElement> inputs = driver.findElements(By.tagName("input"));

System.out.println(inputs.size());

4.linkText--鏈接文本,完整文本要防止有空格

WebElement element1 = driver.findElement(By.linkText("hao123"));

element1.click();

5.partialLinkText--部分鏈接文本

WebElement element2 = driver.findElement(By.partialLinkText("ao123"));

element2.click();

6.className,樣式名稱，有多個(gè)樣式名稱，寫一個(gè)

driver.findElement(By.className("s_ipt")).sendKeys("闊地");;

7.cssSelector樣式選擇器-->標(biāo)簽名[屬性名1=屬性值1][屬性名2=屬性值2]

driver.findElement(By.cssSelector("input[maxlength='255']")).sendKeys("闊地");

8.xpath，描述元素的路徑，坐標(biāo)

button路徑： html/body/div[2]/div/form/div[5]/button-->絕對(duì)路徑

driver.findElement(By.xpath("html/body/div[2]/div/form/div[5]/button")).click();

driver.findElement(By.xpath("/html/body/div[2]/div/form/div[5]/button")).click();

driver.findElement(By.xpath("./html/body/div[2]/div/form/div[5]/button")).click();

絕對(duì)路徑不好，

1.網(wǎng)頁結(jié)構(gòu)可能會(huì)改變

2.結(jié)構(gòu)復(fù)雜，xpath很長，不好維護(hù)

相對(duì)路徑：//*[@屬性名=屬性值]

工具

1）chrome:/html/body/div[2]/div/form/div[5]/button

2)firefox:firebug、firepath:/html/body/div[2]/div/form/div[5]/button

driver.findElement(By.xpath("//*[@class='form-group mt-20']/button")).click();;

driver.findElement(By.xpath("//*[contains(@name,'one')]")).sendKeys("13888888888");

driver.findElement(By.xpath("//a[contains(text(),'免費(fèi)注冊(cè)')]")).click();

js腳本操控元素

//有時(shí)候元素外層套了很多層，需要通過腳本點(diǎn)擊元素

driver.executeScript("arguments[0].click();",element2);

//滾動(dòng)到該元素

driver.executeScript("arguments[0].scrollIntoView();",element2);

//通過空格點(diǎn)擊元素

element2.sendKeys(Keys.SPACE);

//設(shè)置屬性

driver.executeScript("arguments[0].setAttribute('class','el-button el-button--text el-button--small')",element2);

//移除屬性

driver.executeScript("arguments[0].removeAttribute('class')",element2);

在線咨詢

上一篇：如何用JavaScript和HTML 實(shí)現(xiàn)一整套的考試答題卡和成績表
下一篇：HTML、CSS 和 JavaScript等前端開發(fā)技術(shù)，必備入門級(jí)學(xué)習(xí)書單

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

您的項(xiàng)目需求