javascript的偏移、客户端、滚动使用方法详解

OffsetTop是指元素相对于上控件或上控件的位置，整数，单位像素。OffsetLeft指的是元素从左边或上方控制的位置，整数，单位像素。OffsetWidth指元素控件本身的宽度、整数和单位像素。OffsetHeight是指元素控件本身的高度，整数和单位像素。网页可见区宽度：document.body.clientWidth网页可见区高度：document.body.clientHeight网页可见区宽度：document . body . offset twisth(包括边的宽度)。网页可见区域的高度：document . body . offset右侧(包括边缘宽度)。网页全文宽度：document.body.scrollWidth网页全文高度：document.body.scrollHeight网页滚动高度：document.body.scrollTop网页滚动左侧：document.body.scrollLeft网页正文部分：window.s CreenTop网页正文左侧：window.screen左侧屏幕分辨率高度：window.screen.height屏幕分辨率宽度：window.screen.width屏幕可用工作空间高度：window.screen.availHeight屏幕可用工作空间宽度：window.screen。这里是四个浏览器对clientHeight、offsetHeight和scroll height . body的解释。这四种浏览器分别是IE(互联网浏览器)、NS(网景)、Opera和FF(火狐)。ClientHeight这四种浏览器对clientHeight的解释都没有异议，client height被认为是内容可见区域的高度，也就是说页面浏览器中可以看到内容的区域的高度一般是最后一个工具栏下方、状态栏上方的区域，与页面内容无关。偏右IE和Opera认为偏右=clientHeight滚动条边框。NS和FF认为offsetHeight是网页内容的实际高度，可以小于clientHeight。ScrollHeight IE和Opera认为ScrollHeight是网页内容的实际高度，可以小于clientHeight。NS和FF认为scrollHeight是网页内容的高度，但最小值是clientHeight。引言：1 .offsetLeft假设obj是一个HTML控件。Obj.offsetTop指的是Obj相对于上控件或上控件的位置，整数，单位像素。Obj.offsetLeft指的是Obj从左边或上方控制的位置，整数，单位像素。Obj.offsetWidth指的是Obj控件本身的宽度、整数和单位像素。Obj.offsetHeight指的是Obj控件本身的高度，整数，单位像素。让我们解释一下上面提到的“上或上”和“左或上”控件。示例：div id=' tool '输入类型='button '值=' submit '输入类型=' button '值=' reset '/div submit按钮的offsetTop指的是submit按钮与“tool”图层上边框之间的距离，因为“tool”图层的上边框离它最近。“重置”按钮的偏移指的是“重置”按钮和工具层上边框之间的距离，因为工具层的上边框离它最近。“提交”按钮的偏移指的是“提交”按钮与工具层左边框之间的距离，因为最靠近其左侧的是工具层的左边框。重置按钮的偏移量是指重置按钮与提交按钮右边框之间的距离，因为最靠近其左侧的是提交按钮的右边框。上述属性在FireFox中也有效。另外：这里说的是HTML控件的属性值，不是那个document.body和document.body的值在不同的浏览器中有不同的解释(其实大部分环境都是document.body的不同解释造成的，不是偏移)。单击此处查看差异。标题：offsetTop和style.top的区别初步知识：offsetTop，offsetLeft，offsetWidth，offsetHeight我们知道offsetTop可以得到HTML元素在元素之上或之外的位置，style.top也是可以的。它们之间的区别如下：首先，offsetTop返回数字，而style.top返回字符串，除了数字之外还有单位px。第二，offsetTop是只读的，而style.top可以读写。第三，如果没有为HTML元素指定顶部样式，那么style.top将返回一个空字符串。

偏置左边和样式。左边，偏置右边和样式。宽度，偏置右边和样式。高度相同。标题：clientHeight、offsetHeight和scrollHeight。这里我们讨论四个浏览器对clientHeight、offsetHeight和scroll height . body的解释。这里说的是document.body，如果是HTML控件，就不一样了。点击此处查看。这四种浏览器分别是IE(互联网浏览器)、NS(网景)、Opera和FF(火狐)。2.clientHeight clientHeight每个人都不反对clientHeight。他们都认为是内容可见区域的高度，也就是说在页面浏览器中可以看到内容的区域的高度一般是最后一个工具栏下方、状态栏上方的区域，与页面的内容无关。偏右IE和Opera认为偏右=clientHeight滚动条边框。NS和FF认为offsetHeight是网页内容的实际高度，可以小于clientHeight。ScrollHeight IE和Opera认为ScrollHeight是网页内容的实际高度，可以小于clientHeight。NS和FF认为scrollHeight是网页内容的高度，但最小值是clientHeight。简单来说，clientHeight就是通过浏览器查看内容的区域的高度。NS和FF认为offsetHeight和scrollHeight都是网页内容高度，但是当网页内容高度小于等于clientHeight时，scrollHeight的值为clientHeight，offsetHeight可以小于clientHeight。IE和Opera认为偏右是clientHeight滚动条加边框的可视区域。ScrollHeight是网页内容的实际高度。同样，clientWidth、offsetWidth和scrollWidth的解释也和上面一样，只是高度被宽度代替了。然而，FF在不同的DOCTYPE中对clientHeight有不同的解释，而xhtml 1 trasitional则没有。其他浏览器没有这个问题。标题：滚动顶部、滚动顶部、滚动宽度、滚动高度3和滚动顶部是“卷起”的高度值。示例：div class=' width:100px高度：100 px；背景色-: # FF0000；' overflow:hidden'id=' p ' div class=' width :50 px；高度：300 px；背景-颜色： # 0000 ff；'Id='t '如果将scrollTop设置为p，这些内容可能无法完全显示。/div /div脚本类型=' text/JavaScript ' var p=document . getelementbyid(' p ')；p.scrollTop=10/script因为为外部元素p设置了scrollTop，所以内部元素向上滚动。ScrollLeft也类似。我们已经知道，右边是我们自己元素的宽度。ScrollHeight是内部元素的绝对宽度，包括内部元素的隐藏部分。在上图中，p的滚动高度是300，而p的偏移高度是100。ScrollWidth类似。和FireFox，而网景和Opera不支持scrollTop和scroll let(document . body除外)。

标题：offsetTop、offset left、offset twist、offsetthigh4、clientLeft返回对象的offset left属性值与当前窗口左边的真实值之间的距离，可以理解为边框的长度一直对offset left有很大的影响，offsetTop、scrollLeft、ScrollTop是一个比较混乱的方法。花了一天时间研究好，得到了以下结果：1.offsetTop :当前对象与其上级图层顶部的距离无法赋值。若要设置对象与页面顶部之间的距离，请使用style.top属性。2.offsetLeft :当前对象与其上级层左侧之间的距离无法赋值。设置对象和页面左侧之间的距离。请使用style.left属性. 3.offsetwidth:指定当前对象的宽度。与style.width属性的区别在于，如果对象的宽度设置为百分比宽度，则style.width将返回该百分比，而不管页面是大还是小。而offsetWidth返回不同页面中对象的宽度值，而不是百分比值。4.4.offsetHeight :和style.height属性的区别在于，如果将对象的宽度设置为百分比高度，则无论页面是大是小，style.height都会返回这个百分比。OffsetHeight返回对象在不同页面中的高度值，而不是百分比值。5.offsetParent :当前对象上级的对象。注意：如果对象包含在一个DIV中，这个DIV不会被认为是对象的上级(即对象的上级会跳过DIV对象)。如果上级是表，就没问题了。利用该属性，可以获得当前对象在不同大小页面中的绝对位置。绝对位置的脚本代码的复制代码如下：函数get position(obj){ varleft=0；var top=0；当(obj！=document . body){ left=obj . offsetleft；top=obj.offsetTopobj=obj.offsetParent}警报(' Left Is : ' Left ' \ r \ n ' ' Top Is : ' Top)；} 6.scrollLeft :当前窗口显示范围内，从对象最左边到对象最左边的距离，即水平滚动条出现时滚动条拉动的距离。7.在当前窗口的显示范围内，从scrolltop对象的最顶端到该对象的上边缘的距离，即当垂直滚动条出现时，滚动条拖动的距离。这里我们讨论四个浏览器对clientHeight、offsetHeight和scroll height . body的解释。这里我们讨论的是document.body，如果它是一个HTML控件，那么它就不一样了。点击此处查看。这四种浏览器分别是IE(互联网浏览器)、NS(网景)、Opera和FF(火狐)。ClientHeight大家对clientHeight没有异议，它被认为是内容可见区域的高度，也就是说在页面浏览器中可以看到内容的区域的高度一般是最后一个工具栏下方、状态栏上方的区域，与页面内容无关。偏右IE和Opera认为偏右=clientHeight滚动条边框。NS和FF认为offsetHeight是网页内容的实际高度，可以小于clientHeight。ScrollHeight IE和Opera认为ScrollHeight是网页内容的实际高度，可以小于clientHeight。NS和FF认为scrollHeight是网页内容的高度，但最小值是clientHeight。简单来说，clientHeight就是通过浏览器查看内容的区域的高度。NS和FF认为offsetHeight和scrollHeight都是网页内容的高度，但是当网页内容的高度小于或等于clientHeight时，scrollHeight的值就是clientHeight，而offsetHeight可以小于clientHeight。IE和Opera认为右边是clientHeight scrollbar plus的可视区域。