假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
例如:
<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
分享到:
相关推荐
JS元素定位.html
selenium之元素定位,共八种定位方法,以百度搜索框为例子进行讲解
Python+selenium环境搭建&元素定位总结,详细说明环境搭建过程和元素定位的方法
基于Python的Canvas画布元素定位在HolliView项目自动化测试中的应用.rar
fixed默认是相对浏览器定位的,在开发中,经常会用到相对某个元素定位,思路就是障眼法,多套一个div
CSS教程——元素定位CSS教程——元素定位
为了更好地学习WebDriver的八种定位元素的方式,我们使用附件中的注册页面来练习自动化脚本的设计。 博文链接:https://blog.csdn.net/weixin_44679832/article/details/103807698
selenium+java操作UI时,对界面元素进行定位与操作及实例
实现链表元素的定位, 编程题_建立一个单链表,实现链表元素的定位,查找,插入,删除。
元素定位.py
Selenium八种定位元素
web自动化定位方法总结,以及简单案例使用,常用方法都有了
参考多本书籍和资料整理的元素定位总结内容,设置字体较小,可放大来看。有写内容可能布局不是很合理,但是我所遇到和看到的不同定位的方法都总结在上面了。分享给大家。
backdrop-filter影响子元素定位 html文件
对定位属性值进行详解,和...在本文中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。
封装的定位小工具,SDk自带的uiautomatorviewer.bat定位不到时,它可以对元素进行xpath定位
XML应用开发(软件品牌)-1期 4.10 案例分析-使用CSS布局属性显示XML文档-元素定位和元素大小.doc 学习资料 复习资料 教学资源
XML应用开发(软件品牌)-1期 4.10 课堂实践-使用CSS布局属性显示XML文档-元素定位和元素大小.doc 学习资料 复习资料 教学资源
系统的阐述了selenium元素定位的各种方法,每个方法都有实例
3.Appium元素定位1