offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式

摘要:
Obj.offsetHeight是指Obj控件本身的高度、整数和单位像素。“重置”按钮的offsetTop指的是“重置”键与“工具”层上边框之间的距离,因为最近的上边框是“工具”图层的上边框。OffsetTop可以获取HTML元素与上部或外部元素之间的距离,style.top也是如此。两者之间的区别是:1.OffsetTop返回一个数字,而style返回。top返回一个字符串,除了数字之外还有单位px。offsetLeft和style也是如此。left、offsetWidth和style。width、offsetHeight和style.height。
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

假设 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 也是同样道理。

offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式 - netcorner - netcorner的博客
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均无关)

免责声明:文章转载自《offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Unity中DoTween的使用node.js原生后台进阶(一)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

offsetleft、offsetTop、offsetParent的兼容性问题

先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素 ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则...

Eclipse-离线安装Memory Anlysis Tool

 Eclipse版本:Version: Mars.2 Release (4.5.2) 1、从官网下载MAT Memory Anlysis Tool   http://www.eclipse.org/mat/downloads.php    2、解压zip文件到eclipse的安装目录       3、新建mat.link文件      path=D:\de...

《转》常用Petri网模拟软件工具简介

本文转载自liusj2003,如给您带来不便之处,请联系博主。 首先要介绍的的一个非常有名的Petri网网站--Petri Nets World: http://www.informatik.uni-hamburg.de/TGI/PetriNets/ 我这里介绍的软件大部分在该网站中的Tools and Software中的Petri Nets Tool...

CSDN上关于ToolTip的知识

我用VC做TOOL TIP很多次了,但每次都要再研究一遍.虽然说学而时习,应该的,但主要还是由于自己懒.今天一定要记下来.以后再用的时候,就是参考.也请阅读此文的朋友记下来,将来查阅用. 用VC实现TOOL TIP.比较复杂,其实也简单,但MFC帮助一些窗口实现,而另一些窗口又不实现,倒搞得复杂了.最开始我用WM_MOUSEMOVE消息,然后用CToolT...

超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <template> <div> <!-- 内容区域 --> <div class="content">...

使用原生JS定位网页元素

约定:1.<meta name="viewport" content="width=device-width">这种标记简称"wdw"="width=device-width" 约定:2.viewport简称vp 约定:3.常用的属性会有“★”标志 都是只读属性! 其中Chrome或FF没通过的属性标记(未实现) window对象: 1.★i...