在页面中定位元素

 使用getBoundingClientRect获取元素的边界矩形的大小和位置,然后访问其top和left值以确定位置:

//在页面中定位元素
function positionObject(obj) {
    var rect=obj.getBoundingClientRect();
    return [rect.left;rect.top];
}

元素定位是根据该元素的左上角相对于其视口和祖先元素的位置或偏移量来确定的。元素的位置是相对于其他的元素的,并且,还取决于其位置是静态的、相对的、固定的还是绝对的。边距也会影响到元素的位置。

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

rectObject = object.getBoundingClientRect();

返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

PC端:

Mobile端:

 
时间: 2024-10-11 00:41:46

在页面中定位元素的相关文章

webdriver中定位元素,报无法找到元素的问题

webdriver中定位元素,报无法找到元素的问题时,需要查看以下几点: 1 用火狐的firebug插件定位元素,确保这个元素的定位正确: 2 在火狐的firebug插件的,在html页签中输入frame或者iframe去查看这个元素所在的frame或iframe是什么: 写如下语句: WebElement iframe = driver.findElement(By    .xpath("//*[@id='ContentFrame']"));  driver.switchTo().f

使用HTML5的JS选择器操作页面中的元素

上一篇文章介绍了HTML5新增的JavaScript选择器,今晚正式实践一下,使用HTML5的JS选择器操作页面中的元素. 文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS选择器操作页面中的元

在浏览器中使用jquery取得iframe中页面中指定元素的值的不同

自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(window.frames["yourframename"].document).find("#yourelementid")的形式,这个是在调试页面的时候在ie和chrome的开发者工具试过的. 2. 在ascx页面写的时候,和ascx的包含页面(iframe包含的是ascx

Jquery获得子页面中某个元素

本页面中有子框架iframe1,获取iframe1中元素 $("input[name$='svNo']", window.frames["iframe1"].document) $("#iframe1-Name", window.frames["iframe1"].document) Jquery获得子页面中某个元素

jQuery基础学习5——JavaScript方法获取页面中的元素

给网页中的所有<p>元素添加onclick事件 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head>

JQuery iframe页面通过parent方法操作父页面中的元素与方法(实例讲解)

1)在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量: parent.method parent.value 3)实例 1.父页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="If

Jquery如何获得&lt;iframe&gt;嵌套页面中的元素

DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjquery方法:在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text");在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).

Selenium弹出新页面无法定位元素问题(Unable to locate element)--多窗口切换

最近学习到多窗口切换,在页面操作过程中有时点击某个链接会弹出新的窗口,这时需要先切换到新窗口才能对其进行操作.Webdriver提供了switch_to.window( ) 方法实现在不同窗口中切换. 查阅相关资料,得到两种方法来定位到当前页面: 方法一: browser.switch_to_window(browser.window_handles[1]) 方法二:直接定位当前最新弹出的窗口 for handle in browser.window_handles:#方法二,始终获得当前最后的

selenium webdriver在 ie 中无法定位元素和ie文本框字符输入过慢

在跑自动化测试脚本的时候,不同的ie浏览器,有时候无法定位页面中的元素, 关闭ie的保护模式就可以了. 把他们的保护模式都关闭. 字符输入过慢,把64位的IEDriversERVER替换成 32位的