假设 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均无关)
分享到:
相关推荐
《软件开发流程图的国家标准——基于GB1526-89的解析》 在软件开发领域,规范化的流程图是确保项目顺利进行的关键工具之一。中国的国家标准GB1526-89,即《图形符号流程图》,为设计和绘制流程图提供了明确的指导...
web自动化定位方法总结,以及简单案例使用,常用方法都有了
数据字典是软件开发中的关键文档,它提供了关于系统中使用的数据元素的详细描述。这份Excel文件可能包含了数据项、数据流、数据存储、数据结构和数据处理的定义。数据字典用于澄清数据的意义,帮助开发者明确数据的...
在软件开发过程中,一套完整的文档模板是至关重要的,它涵盖了项目的各个阶段,从需求分析到系统测试,确保团队之间的沟通顺畅,项目管理有序。本文将详细介绍这套“完整的全套软件开发文档模板”所包含的关键知识点...
在软件开发过程中,图标起着至关重要的作用。它们不仅能够美化界面,还能够直观地向用户传达各种功能和状态信息。"软件开发常用图标大全"集合了大量的图标资源,旨在为开发者提供一个便捷的一站式解决方案,减少寻找...
在软件开发过程中,图标起着至关重要的作用。它们不仅提升了用户界面的美观...这个丰富的图标集合将为你的软件开发项目提供多样化的选择,无论是在工具栏、菜单、系统还是应用图标上,都能找到合适且高质量的图形元素。
在软件开发过程中,文档起着至关重要的作用,它不仅是团队沟通的桥梁,也是项目管理和质量保证的关键要素。这个"20个常用软件开发文档大全"集合了开发过程中的多种核心文档,旨在帮助开发者们系统地理解和执行软件...
【实习日志】软件项目开发的过程记录了实习生在广东海洋大学软件学院进行软件工程专业实习的经历,主要包括了软件开发的多个关键环节。在实习期间,学生们通过实际操作和学习,逐步掌握了软件开发的核心技能。 首先...
本压缩包文件“百度地图定位开发图标大全(包括定位箭头、定位圆圈)”就是针对这一需求,提供了一系列的定位图标,帮助开发者美化和优化地图定位功能。 首先,我们来了解一下“百度地图图标”的概念。百度地图图标是...
这些图标是软件开发人员日常工作中不可或缺的元素,理解并合理运用这些图标,可以显著提升软件的易用性和用户满意度。设计师在创建新图标时,应遵循一致性、简洁性和可识别性原则,确保图标能准确无误地传达其含义,...
【Qt开发的组态软件(未完成版)】是一个基于Qt框架进行开发的应用程序,它主要专注于图形化界面设计和配置。尽管当前版本还未完成,已经实现了一部分核心功能,但仍有大量的工作需要去做,包括功能扩展和全面的测试...
在软件开发过程中,图标(Icon)和位图(BMP)是至关重要的元素,它们不仅提升用户界面的视觉效果,还能够帮助用户快速识别和理解软件的功能。"软件开发BCB+VC+delphi必备iconBMP图标资源包"正是为满足这样的需求而...
在软件开发过程中,图标设计是不可或缺的一部分,它们不仅提升了用户界面的美观度,还帮助用户快速识别和理解软件的功能。"105个软件开发常用图标PNG格式" 是一个资源集合,提供了大量的PNG图标,适用于C/S(客户端/...
在开发过程中,了解和使用这样的图标库有助于提升软件的用户体验,因为一致且易于理解的图标能帮助用户快速定位功能,提高操作效率。同时,这些图标也可以作为设计规范的参考,确保整个产品界面的设计风格统一。 总...
在这个酒店管理系统中,可能用到`<header>`展示logo和导航菜单,`<section>`组织主要的内容区域,而`<footer>`放置版权信息和联系方式。 此外,这个项目可能还包含JavaScript代码,尽管标题说是纯HTML,但在实际...
通过选择器如类选择器(`.class`)、ID选择器(`#id`)、元素选择器(`element`)等,可以精确地定位到HTML元素并应用样式。同时,使用Flexbox或Grid布局能更好地实现页面元素的排列和对齐,使得网页在不同设备上都...
总之,这个基于QT的GPS卫星定位上位机软件项目涵盖了GUI设计、串口通信、数据解析、时间日期处理等多个方面的编程知识,对于想要学习QT和GPS应用开发的初学者来说,是一个非常有价值的实践案例。通过研究这个项目,...
【简易留言板HTML】是一个非常适合初学者研究和学习的项目,它涵盖了网页开发的基本元素,包括HTML结构、CSS样式以及简单的交互设计。这个项目的核心在于创建一个用户可以提交留言并查看他人留言的简单平台,这对于...
学习HTML5游戏开发,你需要理解HTML5的新特性,尤其是Canvas API,以及如何使用JavaScript来操纵Canvas元素。此外,了解基本的物理引擎原理和如何集成像Box2dWeb这样的库也是必要的。LufyLegend这样的框架可以帮助你...
HTML5的核心特性包括更好的语义化标签、离线存储、拖放功能、媒体元素、 canvas画布、svg矢量图、geolocation定位以及web workers和web sockets等。在这个表白动画中,可能运用了其中的一些关键特性,如canvas或svg...