假设 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均无关)
分享到:
相关推荐
"软件开发常用图标"这个资源包含了大约560个精心收集的小图标,这些图标是开发者们在设计应用或网站时经常会用到的元素。通过这些图标,我们可以深入探讨软件开发中图标设计的一些关键知识点。 首先,图标的设计...
《软件开发流程图的国家标准——基于GB1526-89的解析》 在软件开发领域,规范化的流程图是确保项目顺利进行的关键工具之一。中国的国家标准GB1526-89,即《图形符号流程图》,为设计和绘制流程图提供了明确的指导...
数据字典是软件开发中的关键文档,它提供了关于系统中使用的数据元素的详细描述。这份Excel文件可能包含了数据项、数据流、数据存储、数据结构和数据处理的定义。数据字典用于澄清数据的意义,帮助开发者明确数据的...
在软件开发过程中,图标设计是用户体验中的重要组成部分。它们不仅为用户提供直观的视觉指示,还能增强应用程序的整体美感和功能性。本资源包包含了“软件开发图标大全”,特别关注了Windows常用图标以及GIS(地理...
在软件开发过程中,图标起着至关重要的作用。它们不仅能够美化界面,还能够直观地向用户传达各种功能和状态信息。"软件开发常用图标大全"集合了大量的图标资源,旨在为开发者提供一个便捷的一站式解决方案,减少寻找...
在软件开发过程中,图标起着至关重要的作用。它们不仅提升了用户界面的美观...这个丰富的图标集合将为你的软件开发项目提供多样化的选择,无论是在工具栏、菜单、系统还是应用图标上,都能找到合适且高质量的图形元素。
在软件开发过程中,文档起着至关重要的作用,它不仅是团队沟通的桥梁,也是项目管理和质量保证的关键要素。这个"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应用开发的初学者来说,是一个非常有价值的实践案例。通过研究这个项目,...
学习HTML5游戏开发,你需要理解HTML5的新特性,尤其是Canvas API,以及如何使用JavaScript来操纵Canvas元素。此外,了解基本的物理引擎原理和如何集成像Box2dWeb这样的库也是必要的。LufyLegend这样的框架可以帮助你...
HTML5的核心特性包括更好的语义化标签、离线存储、拖放功能、媒体元素、 canvas画布、svg矢量图、geolocation定位以及web workers和web sockets等。在这个表白动画中,可能运用了其中的一些关键特性,如canvas或svg...
SelectorsHub是一款专为Selenium用户而开发的Chrome扩展程序,旨在帮助Selenium用户更轻松地识别和管理页面元素的位置。它可以作为智能编辑器来编写和验证xpath、cssSelector、Playwright选择器、jQuery和JSPath。...
C#,作为微软.NET框架的一部分,拥有强大的XML处理能力,使得开发这样的工具变得相对简单。 在HTML与XML之间进行转换的主要原因是XML的结构化特性。XML(eXtensible Markup Language)是一种标记语言,它定义了严格...
在HTML5中,可以使用Canvas API或者SVG(Scalable Vector Graphics)元素来绘制饼图。Canvas提供了一套绘图命令,允许开发者直接在画布上绘制图形;而SVG则使用XML语法定义矢量图形,具有更好的缩放性能和清晰度。在...