整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
獲取 HTML 元素的位置坐標，可以使用 JavaScript 中的 DOM 操作來實現(xiàn)。下面是一個示例代碼，展示如何使用 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() 方法將元素的位置坐標輸出到控制臺。您可以根據(jù)實際需要使用這些坐標信息。
請注意，獲取的位置坐標是相對于視口（viewport）的坐標，而不是相對于整個頁面的坐標。如果需要獲取相對于頁面的坐標，可以結(jié)合 window.scrollX 和 window.scrollY 屬性進行計算。
lt;!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title>獲取鼠標坐標</title>
</head>
<body>
<script type="text/javascript">
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é)點。
2.scrollTop() 為滾動條向下移動的距離
3.document.documentElement.scrollTop 指的是滾動條的垂直坐標
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">
如果在頁面中添加這行標記的話
IE
document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?document.documentElement.clientHeight ==> 可見區(qū)域高度
Firefox
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度 document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度 document.documentElement.scrollTop ==> 瀏覽器滾動部分高度 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==>瀏覽器滾動部分高度 document.documentElement.clientHeight ==> 瀏覽器可視部分高度 document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
瀏覽器所有內(nèi)容高度即瀏覽器整個框架的高度，包括滾動條卷去部分+可視部分+底部隱藏部分的高度總和
瀏覽器滾動部分高度即滾動條卷去部分高度即可視頂端距離整個對象頂端的高度。
綜上
1、document.documentElement.scrollTop和document.body.scrollTop始終有一個為0，所以可以用這兩個的和來求scrollTop
2、scrollHeight、clientHeight 在DTD已聲明的情況下用documentElement，未聲明的情況下用body
clientHeight 在IE和FF下，該屬性沒什么差別，都是指瀏覽器的可視區(qū)域，即除去瀏覽器的那些工具欄狀態(tài)欄剩下的頁面展示空間的高度。
PageX和clientX
PageX:鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化
clientX:鼠標在頁面上可視區(qū)域的位置,從瀏覽器可視區(qū)域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化.
可是悲劇的是,PageX只有FF特有,IE則沒有這個，所以在IE下使用這個：
PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)
scrollTop代表的是被瀏覽器滑動條滾過的長度
offsetX:IE特有,鼠標相比較于觸發(fā)事件的元素的位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點,如果有boder`,可能出現(xiàn)負值
只有clientX和screenX 皆大歡喜是W3C標準.其他的,都糾結(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,當事件發(fā)生時有效
var diffX = e.clientX - oDiv.offsetLeft;//獲取鼠標點擊的位置到所選對象的邊框的水平距離
var diffY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e){ //需設為document對象才能作用于整個文檔
var e = e||window.event;
oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所選對象的邊框到瀏覽器左側(cè)距離
oDiv.style.top = e.clientY -diffY + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;//清除鼠標釋放時的對象移動方法
document.onmouseup = null;
}
}
</script>
</body>
</html>
offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。
eb頁面元素定位有常用以下幾種方式。
1.id，唯一標識符，還有一個name也可以用
WebElement input = driver.findElement(By.id("kw"));
2.name，給服務器用的
WebElement input = driver.findElement(By.name("wd"));
String value = input.getAttribute("maxlength");
System.out.println(value);
3.tagName,標簽名（頻率比較低），查找列表-->爬蟲
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,樣式名稱，有多個樣式名稱，寫一個
driver.findElement(By.className("s_ipt")).sendKeys("闊地");;
7.cssSelector樣式選擇器-->標簽名[屬性名1=屬性值1][屬性名2=屬性值2]
driver.findElement(By.cssSelector("input[maxlength='255']")).sendKeys("闊地");
8.xpath，描述元素的路徑，坐標
button路徑： html/body/div[2]/div/form/div[5]/button-->絕對路徑
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();
絕對路徑不好，
1.網(wǎng)頁結(jié)構(gòu)可能會改變
2.結(jié)構(gòu)復雜，xpath很長，不好維護
相對路徑：//*[@屬性名=屬性值]
工具
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(),'免費注冊')]")).click();
js腳本操控元素
//有時候元素外層套了很多層，需要通過腳本點擊元素
driver.executeScript("arguments[0].click();",element2);
//滾動到該元素
driver.executeScript("arguments[0].scrollIntoView();",element2);
//通過空格點擊元素
element2.sendKeys(Keys.SPACE);
//設置屬性
driver.executeScript("arguments[0].setAttribute('class','el-button el-button--text el-button--small')",element2);
//移除屬性
driver.executeScript("arguments[0].removeAttribute('class')",element2);
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
