安装或得到位于对象最上方和窗口中可知内容的最上面之间的相距 ,获取对象相对于版面或由父坐标

了不起看看上边那张图,基本上就没啥难题了!

HTML精明确位:scrollLeft,scrollWidth,clientWidth,offsetWidth 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
相对文书档案的水准座标+垂直方向滚动的量

scrollHeight:
获取对象的滚动中度。 

这里是JavaScript中国建工总集团造迁移转变代码的常用属性

页可知区域宽:document.body.clientWidth;
网页可知区域高:document.body.clientHeight;
网页可知区域宽:document.body.offsetWidth (包涵边线的宽);
网页可知区域高: document.body.offsetHeight (包罗边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文项目组上: window.screenTop;
网页正文项目组左: window.screenLeft;
显示屏辨别率的高: window.screen.height;
显示屏辨别率的宽: window.screen.width;
荧屏可用工作区中度: window.screen.availHeight;

图片 1

要素模型图.png

1、offsetLeft

假设 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
指“重置”按钮距“提交”按钮左侧框的距离,因为距其左侧比来的是“提交”按钮的右手框。

如上属性在 FireFox 中也使得。

另 外:大家这里所说的是指 HTML 控件的属性值,并不是
document.body,document.body
的值在不合浏览器中有不合表明(实际上海大学多全场景是因为对 document.body
注解不合造成的,并不是因为对 offset
申明不合造成的),点击那里查看不合点。

题目:offsetTop 与 style.top 的差别

筹备举行常识:offsetTop、offsetLeft、offsetWidth、offsetHeight

作者们精晓 offsetTop 能够拿走 HTML 成分间隔上方或外层成分的身份,style.top
也是能够的,二者的差距是:

一 、offsetTop 重回的是数字,而 style.top
再次来到的是字符串,除了数字外还蕴涵单位:px。

二、offsetTop 只读,而 style.top 可读写。

三 、尽管没有给 HTML 成分内定过 top 样式,则 style.top 重回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与
style.height 也是均等道理。

题目:clientHeight、offsetHeight和scrollHeight

咱俩那边说说多种浏览器对 document.body 的 clientHeight、offsetHeight 和
scrollHeight 的表达,那里说的是 document.body,尽管是 HTML
控件,则又有不合,点击那里查看。

那七种浏览器分别为IE(Internet
Explorer)、NS(Netscape)、Opera、FF(FireFox)。

2、clientHeight

clientHeight

大师对 clientHeight
都尚未什么样贰言,都觉得是内容可视区域的可观,也正是说页面浏览器中得以见见内容的那几个区域的冲天,一般是最后三个目标条以下加入景栏以上的这几个区域,与页面内容非亲非故。

offsetHeight

IE、Opera 认为 offsetHeight = 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 认为 offsetHeight 是可视区域 clientHeight
迁移转变条加边框。scrollHeight 则是网页内容实际中度。

同理

clientWidth、offsetWidth 和 scrollWidth
的阐发与上方雷同,只是把中度换来宽度即可。

然则

FF 在不合的 DOCTYPE 中对 clientHeight 的阐发不合, xhtml 1 trasitional
中则不是如上注明的。其它浏览器则不设有此题材。

题目:scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft

scrollTop 是“卷”起来的可观值,示例:

<div
style=”width:100px;height:100px;background-color:#FF0000;overflow:hidden;”
id=”p”>

<div style=”width:50px;height:300px;background-color:#0000FF;”
id=”t”>借使为 p 设置了
scrollTop,这个内容恐怕不会全盘展现。</div>

</div>

<script type=”text/javascript”>

var p = document.getElementById(”p”);

p.scrollTop = 10;

</script>

因为为外层成分 p 设置了 scrollTop,所以内层成分会向上卷。

scrollLeft 也是相仿事理。

作者们早就知晓 offsetHeight 是自个儿因素的增长幅度。

而 scrollHeight 是里面因素的相对化宽度,包蕴当中因素的隐没的项目组。

上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似事理。

IE 和 FireFox 全面支撑,而 Netscape 和 Opera 不帮助scrollTop、scrollLeft(document.body 除了那些之外)。

公告时候:2006-10-15 20:20:16

题目:offsetTop、offsetLeft、offsetWidth、offsetHeight

4、clientLeft

回到对象的offsetLeft属性值和到当前窗口右边的真实值之间的区间,能够通晓为边框的长度

自古以来以来对offsetLeft,offsetTop,scrollLeft,scrollTop那多少个主意很含混,花了一天的时候能够的自学了一下.汲取了以下的收获:

1.offsetTop :

现阶段目的到其上级层顶部的间隔.

不克不及对其开始展览赋值.设置对象到页面顶部的区间请用style.top属性.

2.offsetLeft :

脚下指标到其上司层左边的间隔.

不克不及对其展开赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth :

近来指标的宽度.

与style.width属性的异样在于:如目的的小幅设定值为百分比上涨幅度,则不管页面变大还是变小,style.width都回来此比例,而offsetWidth则赶回在不合页面中目的的升幅值而不是百分比率

4.offsetHeight :

与style.height属性的差距在于:如指标的幅度设定值为百分比惊人,则无论页面变大照旧变小,style.height都回到此比例,而offsetHeight则赶回在不合页面中指标的中度值而不是百分比率

5.offsetParent :

近年来目的的上级层对象.

重视.假设目的是富含在二个DIV中时,此DIV不会被看成是此目的的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有标题.

诈骗行为那天个性,能够取妥帖前目的在不合大小的页面中的相对地位.

赢得相对地位脚本代码

1function GetPosition(obj)

2{

3 var left = 0;

4 var top = 0;

5

6 while(obj != document.body)

7 {

8 left = obj.offsetLeft;

9 top = obj.offsetTop;

10

11 obj = obj.offsetParent;

12 }

13

14 alert(”Left Is : ” + left + “\r\n” + “Top Is : ” + top);

15}

6.scrollLeft :

对象的最右侧到对象在此时此刻窗口展现的受制内的左手的间隔.

就是在表现了横向迁移转变条的现象下,迁移转变条拉动的间隔.

7.scrollTop

目标的最顶部到指标在此时此刻窗口呈现的局限内的顶边的间隔.

正是在呈现了纵向迁移转变条的场景下,迁移转变条拉动的间隔.

我们那边说说各个浏览器对 document.body 的 clientHeight、offsetHeight 和
scrollHeight 的表达,这里说的是 document.body,如若是 HTML
控件,则又有不合,点击那里查看。

这各样浏览器分别为IE(Internet
Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight

大师对 clientHeight
都尚未什么样贰言,都认为是内容可视区域的可观,相当于说页面浏览器中得以看到内容的那么些区域的冲天,一般是终极一个指标条以下参与景栏以上的这么些区域,与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = 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 认为 offsetHeight 是可视区域 clientHeight
迁移转变条加边框。scrollHeight 则是网页内容实际中度。

同理

clientWidth、offsetWidth 和 scrollWidth
的阐发与上方雷同,只是把低度换来宽度即可。

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
绝对文书档案的水准座标+垂直方向滚动的量

页可知区域宽:
document.body.clientWidth;
网页可知区域高:
document.body.clientHeight;
网页可知区域宽:
document.body.offsetWidth   (包涵边线的宽);
网页可知区域高:
document.body.offsetHeight (包括边线的宽);
网页正文全文宽:
document.body.scrollWidth;
网页正文全文高:
document.body.scrollHeight;
网页被卷去的高:
document.body.scrollTop;
网页被卷去的左:
document.body.scrollLeft;
网页正文项目组上:
window.screenTop;
网页正文项目组左:
window.screenLeft;
荧屏辨别率的高:
window.screen.height;
显示屏辨别率的宽:
window.screen.width;
荧屏可用工作区中度:
window.screen.availHeight;

 图片 2

假设 obj 为某个 HTML
控件。

obj.offsetLeft 指 obj
间隔左方或上层控件的地点,整型,单位像素。

obj.offsetHeight 指
obj 控件本人的可观,整型,单位像素。

筹办常识:offsetTop、offsetLeft、offsetWidth、offsetHeight

① 、offsetTop
重回的是数字,而 style.top
再次来到的是字符串,除了数字外还富含单位:px。

叁 、借使没有给 HTML
成分内定过 top 样式,则 style.top 重返的是空字符串。

题目:clientHeight、offsetHeight和scrollHeight

浏览器分别为IE(Internet Explorer)、Opera、FF(FireFox)。

clientHeight

offsetHeight

FF 认为 offsetHeight
是网页内容实际中度,能够低于 clientHeight。

IE、Opera 认为
scrollHeight 是网页内容实际中度,能够低于 clientHeight。

不难地说

、 FF 认为
offsetHeight 和 scrollHeight
都是网页内容高度,只可是当网页内容中度小于正是 clientHeight
时,scrollHeight 的值是 clientHeight,而 offsetHeight 能够低于
clientHeight。

题目:scrollTop、scrollLeft、scrollWidth、scrollHeight

scrollTop
是“卷”起来的中度值

scrollLeft
也是近乎事理。

而 scrollHeight
是当中因素的断然宽度,包蕴当中因素的隐身的项目组。

scrollWidth
也是近似事理。

4、clientLeft

根本以来对offsetLeft,offsetTop,scrollLeft,scrollTop那多少个主意很含混,花了一天的时候能够的自学了一下.搜查捕获了以下的战果:

1.offsetTop :

设置对象到页面顶部的距离请用style.top属性.

眼下指标到其上面包车型大巴间隔.

3.offsetWidth
:

与style.width属性的歧异在于:如目的的幅度设定值为百分比涨幅,则不管页面变大还是变小,style.width都回去此比例,而offsetWidth则赶回在不合页面中目的的增长幅度值而不是百分比率

与style.height属性的异样在于:如目的的宽度设定值为百分比中度,则无论页面变大依旧变小,style.height都回来此比例,而offsetHeight则赶回在不合页面中指标的冲天值而不是百分比率

5.offsetParent  
:

重视.假若目的是带有在三个DIV中时,此DIV不会被当作是此指标的上级层,(即对象的上边层会跳过DIV对象)上级层是Table时则不会有标题.

获得相对地位脚本代码

{var left = 0;

  var top   =
0;

  while(obj !=
document.body)

        left =
obj.offsetLeft;

        top   =
obj.offsetTop;

       obj =
obj.offsetParent;}

6.scrollLeft :

正是在表现了横向迁移转变条的气象下,迁移转变条拉动的间隔.

目的的最顶部到对象在脚下窗口展示的局限内的顶边的间隔.

咱俩那边说说多种浏览器对 document.body 的 clientHeight、offsetHeight 和
scrollHeight 的发明,这里说的是 document.body

clientHeight

offsetHeight

FF 认为 offsetHeight
是网页内容实际高度,能够低于 clientHeight。

IE、Opera 认为
scrollHeight 是网页内容实际中度,能够低于 clientHeight。

不难地说

FF 认为 offsetHeight
和 scrollHeight 都是网页内容高度,只可是当网页内容高度小于正是clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight
能够低于 clientHeight。

同理

clientWidth、offsetWidth 和 scrollWidth
的表明与上方雷同,只是把中度换来宽度即可。

 

 

相关文章