获取 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 属性进行计算。

lt;!DOCTYPE html>

<head>

<title>获取鼠标坐标</title>

</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 属性可返回文档的根节点。

2.scrollTop() 为滚动条向下移动的距离

3.document.documentElement.scrollTop 指的是滚动条的垂直坐标

4.document.documentElement.clientHeight 指的是浏览器可见区域高度

DTD已声明的情况下：

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

如果在页面中添加这行标记的话

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Firefox

document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop ==> 浏览器滚动部分高度
document.body.scrollTop ==>始终为0
document.documentElement.clientHeight ==>浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop==> 始终为0
document.body.scrollTop==>浏览器滚动部分高度
document.documentElement.clientHeight ==> 浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度

浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

综上

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop

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

clientHeight
 在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

PageX和clientX

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化.

可是悲剧的是,PageX只有FF特有,IE则没有这个，所以在IE下使用这个：

PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)

scrollTop代表的是被浏览器滑动条滚过的长度

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder`,可能出现负值

只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.

最给力的是，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,当事件发生时有效
 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表示所选对象的边框到浏览器左侧距离
 oDiv.style.top = e.clientY -diffY + 'px';
 };
 document.onmouseup = function(){
 document.onmousemove = null;//清除鼠标释放时的对象移动方法
 document.onmouseup = null;
 }
 }
</script>
</body> 
</html>

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：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.网页结构可能会改变

2.结构复杂，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);

在线咨询

上一篇：如何用JavaScript和HTML 实现一整套的考试答题卡和成绩表
下一篇：HTML、CSS 和 JavaScript等前端开发技术，必备入门级学习书单

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

获取 HTML 元素的位置坐标

您的项目需求