javascript JS元素位置和位置坐标

常见的属性:网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包含边线的宽);网页可见区

常见的属性:


网页可见区域宽: 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;(返回窗口相对于屏幕的y坐标)

网页正文项目组左: window.screenLeft;(返回窗口相对于屏幕的x坐标)

屏幕辨别率的高: window.screen.height;(返回当前屏幕高度,即分辨率值)

屏幕辨别率的宽: window.screen.width;(返回当前屏幕宽度,即分辨率值)

屏幕可用工作区高度: window.screen.availHeight;(空白空间)


屏幕可用工作区的宽度:window.screen.availWidth;(空白空间)


(1)offsetLeft


假设 obj 为某个 HTML 控件。


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


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


注意的是;


{I}、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。


{II}、offsetTop 只读,而 style.top 可读写。


{III}、若是没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。


(2)clientWidth/clientHeight,offsetWidth/offsetHeight,scrollWidth/scrollHeight


IE、Opera 认为 offsetHeight = clientHeight + 迁移转变条 + 边框。


NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。


IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。


NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。


clientHeight 就是透过浏览器看内容的这个区域高度。

即:NS、 FF 认为 offsetWidth/offsetHeight 和 scrollWidth/scrollHeight 都是网页内容高度,只不过当网页内容高度小于便是 clientWidth/clientHeight 时,scrollWidth/scrollHeight 的值是 clientWidth/clientHeight,而 offsetWidth/offsetHeight 可以小于clientWidth/ clientHeight。IE、Opera 认为 offsetWidth/offsetHeight 是可视区域 clientWidth/clientHeight 迁移转变条加边框。scrollWidth/scrollHeight 则是网页内容实际高度。


(3)scrollTop/scrollLeft.scrollWidth/scrollHeight


IE 和 FireFox 周全支撑,而 Netscape 和 Opera 不支撑 scrollTop、scrollLeft(document.body 除外)。


scrollWidth/scrollHeight 是内部元素的绝对宽度/高度,包含内部元素的隐蔽的项目组。


(4)offsetWidth/offsetHeight


与style.width属性的差别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不合页面中对象的宽度值而不是百分比值


与style.height属性的差别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不合页面中对象的高度值而不是百分比值


(5)offsetParent


offsetParent是个只读属性,返回最近显示指定位置的容器元素的引用。如果元素没有指定位置,最近的元素或者根元素(标准模式下是html,怪异模式下是body)就是offsetParent。当元素的style.display='none'时,offsetParent返回null。由于offsetTop和offsetLeft是相对于页边距,因此offsetParent是非常有用的。

浏览器兼容性

     在以WebKit为核心的浏览器上,如果元素是隐藏的(该元素或者上级元素style.display='none')或者元素自身style.position='fixed',那么就会返回null。

    在IE(9)上如元素style.position='fixed',该属性就会返回null。(然而display:none不影响这个浏览器)


扩展:

1、style.left,style.top,style.right,style.bottom的使用注意:

{I}

position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。

(1)若指定为static时,DIV遵循HTML规则;

(2)若指定为relative时,可以用top、left、right、bottom来设置DIV在页面中的偏移,但是此时不可使用层;

(3)若指定为absolute时,可以用top、left、right、bottom对DIV进行绝对定位;

(4)若指定为fixed时,在IE7与FF中DIV的位置相对于屏幕固定不变,IE6中没有效果(期待高手指点原因); 

left:设置对象相对于文档层次中最近一个定位对象的左边界的位置。 

top:设置对象相对于文档层次中最近一个定位对象的上边界的位置。 

right:设置对象相对于文档层次中最近一个定位对象的右边界的位置。 

bottom:设置对象相对于文档层次中最近一个定位对象的下边界的位置。 

{II}

 ie6-ie8可使用可以直接用obj.style.top=100; 但在FireFox和ie9中必须加上单位,变成obj.style.top=100+'px'; style.left同理。


2、clientWidth = content + padding       clientHeight = content+ padding  (即:元素的clientWidth,clientHeight是指这个元素的包含补白在内的宽,高)

    clientWidth与clientHeight都是只读属性,

3、scrollHeight和scrollWidth属性,指包含滚动条在内的该元素的视觉面积。表示滚动条滚动的高度和宽度。

   滚动条滚动的垂直距离,是document对象的scrollTop属性;滚动条滚动的水平距离是document对象的scrollLeft属性。

4、offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。(注意:不适用于表格和iframe内的元素)

5、getBoundingClientRect()方法。它返回一个矩形对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。【为了兼容把body加上margin:0;padding:0,注意加DOCTYPE声明(有了它IE还是挺听话的)】


相关推荐

[!--temp.pl--]