AD

Javascript获取窗口(容器)的大小及位置参数列举及简要说明

Javascript获取窗口(容器)的大小及位置一系列的东西比较多,容易混淆,在这里列举及简要说明下,需要的朋友可以参考下

Javascript获取窗口(容器)的大小及位置一系列的东西比较多,容易混淆,在这里列举及简要说明下:

属性方法说明
clientX 相对文档的水平坐标;
clientY 相对文档的垂直坐标;
offsetX 相对容器的水平坐标;
offsetY 相对容器的垂直坐标;
scrollWidth 获取对象的滚动宽度;
scrollHeight 获取对象的滚动高度;
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 ;
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 ;
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度;
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度;
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 ;
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置.

Javascript获取屏幕、窗口大小方法
屏幕分辨率的高:window.screen.height ;
屏幕分辨率的宽:window.screen.width ;
屏幕可用工作区高度(不包含任务栏):window.screen.availHeight ;
屏幕可用工作区宽度(不包含任务栏):window.screen.availWidth;
网页可见区域宽(不包含滚动条和边框):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 .

注:有时会出现取不到值的情况,是因为html文件头部加了文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "****w3**/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="****w3**/1999/xhtml"> ,
此时把document.body.scrollTop和document.body.scrollLeft改为:document.documentElement.scrollTop 和document.documentElement.scrollLeft即可,document.body.clientWidth和document.body.clientHeight也要改为:document.documentElement.clientWidth和document.documentElement.clientHeight

当然还有疏漏或没说明清楚的地方,大家可以补充、讨论或者百度百度,一起进步!ye~

标签: 位置, 大小, Javascript获取窗口
分类: 基础知识
时间: 2014-09-21

相关文章

  1. JavaScript获取元素尺寸和大小操作总结

    本文总结了使用JavaScript获取指定元素大小.位置的几种方式.如果你用的是JQuery,则获取元素大小是非常简单的.但是我们还是有必要知道如何通过原生JavaScript来获取,需要的朋友可以参考下 一.获取元素的 ...
  2. 用JavaScript获取DOM元素位置和尺寸大小的方法

    本篇文章,小编为大家介绍关于用JavaScript获取DOM元素位置和尺寸大小的方法,有需要的朋友可以参考一下 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位 ...
  3. javascript获取和判断浏览器窗口.屏幕.网页的高度.宽度等

    这篇文章主要介绍了javascript获取和判断浏览器窗口.屏幕.网页的高度.宽度等,需要的朋友可以参考下 HTML精确定位属性:scrollLeft,scrollWidth,clientWidth,offsetWidt ...
  4. JavaScript获取图片真实大小代码实例

    这篇文章主要介绍了JavaScript获取图片真实大小代码实例,本文使用onload事件来获取图片的真实大小,需要的朋友可以参考下 网页页面上的图片尺寸似乎都千篇一律.我们最常见到的带有多图的文章页面中,图的大小通常是和 ...
  5. javascript客户端遍历控件与获取父容器对象示例代码

    本篇文章主要是对javascript客户端遍历控件与获取父容器对象示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1,遍历也面中所有的控件function findControlAll() { var ...
  6. IE与FF下javascript获取网页及窗口大小的区别详解

    本篇文章主要是对IE与FF下javascript获取网页及窗口大小的区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 在新定义出来的标准下 document.documentElement.client ...
  7. 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码

    用 javascript 获取当页面上鼠标(光标)位置 和 触发事件的对象 的方法 用javascript获取鼠标位置: function mousePosition(ev) { if (ev.pageX || ev.p ...
  8. JavaScript获取网页.浏览器.屏幕高度和宽度汇总

    这篇文章主要汇总介绍了JavaScript获取网页.浏览器.屏幕高度和宽度的方法,非常使用,有需要的小伙伴参考下. 经常发现在写JavaScript的时候,都需要用到网页.浏览器或屏幕的高度和宽度来解决布局定位的问题,时 ...
  9. DOCTYPE声明对JS获取窗口宽度和高度的影响

    摘注]:以下说法不准确,不是有没有DOCTYPE声明,而是不同的DOCTYPE声明对js的处理有影响. 在没有DOCTYPE声明的情况下: document.body.clientWidth document.body. ...
  10. 通过javascript获取多种主流浏览器显示页面高度

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentEle ...
  11. javascript 获取FCKeditor内容

    javascript获取FCKeditor内容,需要的朋友可以参考下. 形式如: varoEditor=FCKeditorAPI.GetInstance('content'); varcontent=oEditor.Ge ...
  12. JS控制弹出新页面窗口位置和大小的方法

    这篇文章主要介绍了JS控制弹出新页面窗口位置和大小的方法,实例分析了open方法弹出窗口的使用技巧,需要的朋友可以参考下 本文实例讲述了JS控制弹出新页面窗口位置和大小的方法.分享给大家供大家参考.具体如下: 相信很多朋 ...
  13. JQuery获取元素文档大小.偏移和位置和滚动条位置的方法集合

    在ajax中经常需要对元素的位置进行精确的定位,此时不仅需要获取元素自身的大小位置等属性.还需要知道页面.浏览器.滚动条等的长度和宽度. 因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程 ...
  14. javascript获取隐藏元素(display:none)的高度和宽度的方法

    这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下 js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: function ...
  15. JavaScript新窗口与子窗口传值详解

    这篇文章主要介绍了JavaScript新窗口与子窗口之间的传值,需要的朋友可以参考下 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ wi ...
  16. 通过JavaScript获取页面上的鼠标位置

    用 JS 计算鼠标在页面上的位置并非难事, 只要把握好各浏览器的区别就可以轻易算出鼠标位置. (这是 DEMO) 视窗 (浏览器可视窗口) 就像是页面上的掩板开了一个洞. 滚动条可以改变页面和视窗之间的偏移量, 从而可以 ...
  17. js获取窗口相对于屏幕左边和上边的位置坐标

    这篇文章主要介绍了js如何获取窗口相对于屏幕左边和上边的位置,需要的朋友可以参考下 获取窗口相对于屏幕左边和上边的位置: var x=window.screenLeft?window.screenLeft: window ...
  18. JavaScript获取网页中第一个链接ID的方法

    这篇文章主要介绍了JavaScript获取网页中第一个链接ID的方法,涉及javascript中document.links方法的使用,需要的朋友可以参考下 本文实例讲述了JavaScript获取网页中第一个链接ID的方 ...
  19. javascript获取网页中指定节点的父节点.子节点的方法小结

    如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法,感兴趣的朋友可以参考下哈 我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那 ...