`
feohoo
  • 浏览: 112599 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

HTML元素定位(软件开发的时候无赖的时候用到)

    博客分类:
  • AJAX
阅读更多
假设 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,即《图形符号流程图》,为设计和绘制流程图提供了明确的指导...

    软件开发项目常用表格

    数据字典是软件开发中的关键文档,它提供了关于系统中使用的数据元素的详细描述。这份Excel文件可能包含了数据项、数据流、数据存储、数据结构和数据处理的定义。数据字典用于澄清数据的意义,帮助开发者明确数据的...

    完整的全套 软件开发文档模板

    在软件开发过程中,一套完整的文档模板是至关重要的,它涵盖了项目的各个阶段,从需求分析到系统测试,确保团队之间的沟通顺畅,项目管理有序。本文将详细介绍这套“完整的全套软件开发文档模板”所包含的关键知识点...

    软件开发常用图标大全

    在软件开发过程中,图标起着至关重要的作用。它们不仅能够美化界面,还能够直观地向用户传达各种功能和状态信息。"软件开发常用图标大全"集合了大量的图标资源,旨在为开发者提供一个便捷的一站式解决方案,减少寻找...

    图标素材, 软件开发界面图标

    总的来说,图标素材和软件开发界面图标是构建用户友好、视觉吸引力强的软件界面的关键元素。通过合理选择和设计图标,可以提升软件的用户体验,增加产品的辨识度,从而在竞争激烈的市场中脱颖而出。因此,理解和掌握...

    20个常用软件开发文档大全

    在软件开发过程中,文档起着至关重要的作用,它不仅是团队沟通的桥梁,也是项目管理和质量保证的关键要素。这个"20个常用软件开发文档大全"集合了开发过程中的多种核心文档,旨在帮助开发者们系统地理解和执行软件...

    20个软件开发常用设计文档大全

    在软件开发过程中,设计文档是项目管理、团队协作和代码实现的重要组成部分。这些文档帮助确保项目的顺利进行,减少沟通误解,提高工作效率。以下是对"20个软件开发常用设计文档大全"中可能包含的一些关键文档及其...

    软件开发图标(经典收藏)

    在软件开发过程中,图标起着至关重要的作用。它们不仅提升了用户界面的美观...这个丰富的图标集合将为你的软件开发项目提供多样化的选择,无论是在工具栏、菜单、系统还是应用图标上,都能找到合适且高质量的图形元素。

    软件开发常用图标集合

    "软件开发常用图标集合"这个资源包含了各种各样的图标,可能包括了文档编辑、数据处理、系统操作等多个领域的常用图形元素。虽然资源中没有进行详细的分类,但我们可以根据常见的软件图标类型来探讨这些图标可能涵盖...

    HTML开发像素测量工具

    在网页设计和开发过程中,精确的像素测量是至关重要的,特别是在创建响应式布局或需要精确定位元素时。"HTML开发像素测量工具"是专为前端开发者设计的实用辅助工具,帮助他们准确地测量网页元素的尺寸,确保设计的...

    web前端开发html+css+js免费下载(设计作品成品)

    在“web前端开发html+css+js免费下载(设计作品成品)”这个资源中,包含了一系列使用HTML、CSS和JavaScript技术构建的Web应用实例。这些技术是现代Web开发的基石,它们共同作用于创建交互式的网页和应用程序。下面...

    百度地图定位开发图标大全(包括定位箭头、定位圆圈)

    本压缩包文件“百度地图定位开发图标大全(包括定位箭头、定位圆圈)”就是针对这一需求,提供了一系列的定位图标,帮助开发者美化和优化地图定位功能。 首先,我们来了解一下“百度地图图标”的概念。百度地图图标是...

    软件开发常用图标

    这些图标是软件开发人员日常工作中不可或缺的元素,理解并合理运用这些图标,可以显著提升软件的易用性和用户满意度。设计师在创建新图标时,应遵循一致性、简洁性和可识别性原则,确保图标能准确无误地传达其含义,...

    Qt开发的组态软件(未完成版)

    【Qt开发的组态软件(未完成版)】是一个基于Qt框架进行开发的应用程序,它主要专注于图形化界面设计和配置。尽管当前版本还未完成,已经实现了一部分核心功能,但仍有大量的工作需要去做,包括功能扩展和全面的测试...

    一个不错的页面框架,html框架,oa能用到

    【标题】中的“一个不错的页面框架,html框架,oa能用到”指的是一种用于构建网页和企业级应用,特别是办公自动化(OA)系统的前端框架。这类框架通常包含一系列预设计的HTML、CSS和JavaScript组件,能够帮助开发者...

    软件开发BCB+VC+delphi必备iconBMP图标资源包

    在软件开发过程中,图标(Icon)和位图(BMP)是至关重要的元素,它们不仅提升用户界面的视觉效果,还能够帮助用户快速识别和理解软件的功能。"软件开发BCB+VC+delphi必备iconBMP图标资源包"正是为满足这样的需求而...

    105个软件开发常用图标PNG格式

    在软件开发过程中,图标设计是不可或缺的一部分,它们不仅提升了用户界面的美观度,还帮助用户快速识别和理解软件的功能。"105个软件开发常用图标PNG格式" 是一个资源集合,提供了大量的PNG图标,适用于C/S(客户端/...

    1000个软件中常用到的经典图标大小16*16icon文件

    在开发过程中,了解和使用这样的图标库有助于提升软件的用户体验,因为一致且易于理解的图标能帮助用户快速定位功能,提高操作效率。同时,这些图标也可以作为设计规范的参考,确保整个产品界面的设计风格统一。 总...

    关于页面元素的绝对定位和相对定位的一些理解

    绝对定位(position: absolute)则是另一种定位方式,它允许开发人员将元素放置在相对于最近的已定位祖先元素的位置,如果没有已定位的祖先元素,则相对于初始包含块(通常是视口)。使用绝对定位的元素脱离了文档流...

    纯html写的酒店管理系统

    在这个酒店管理系统中,可能用到`&lt;header&gt;`展示logo和导航菜单,`&lt;section&gt;`组织主要的内容区域,而`&lt;footer&gt;`放置版权信息和联系方式。 此外,这个项目可能还包含JavaScript代码,尽管标题说是纯HTML,但在实际...

Global site tag (gtag.js) - Google Analytics