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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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~

赞 (0)

相关推荐

  • 学习ExtJS 访问容器对象

    一.属性 ownerCt:得到当前对象所在的容器. items:集合列表 二.应用举例 复制代码 代码如下: Ext.onReady(function(){ var _window = new Ext.Window({ title:"测试窗体", layout:"form", width:300, plain:true, items:{ id:"name", xtype:"textfield", fieldLabel:&quo

  • js模仿java的Map集合详解

    js模仿java的Map集合详解

    java.util 中的集合类包含 Java 中某些最常用的类.最常用的集合类是 List 和 Map.List 的具体实现包括 ArrayList 和 Vector,它们是可变大小的列表,比较适合构建.存储和操作任何类型对象元素列表.List 适用于按数值索引访问元素的情形. Map 提供了一个更通用的元素存储方法.Map 集合类用于存储元素对(称作"键"和"值"),其中每个键映射到一个值.从概念上而言,您可以将 List 看作是具有数值键的 Map.而实际上,除

  • Java中快速把map转成json格式的方法

    在日常的使用中,我们一般会遇到map转json,如果遍历的话会浪费大量的时间,其实我们拥有这样的jar包 复制代码 代码如下: The method *** is undefined for the type JSONObject 缺哪个包------ json-lib.jar 这样还是不行的 需要一个依赖的jar包要不然会报错 复制代码 代码如下: java.lang.ClassNotFoundException: net.sf.ezmorph.Morpher 当当当当   jar包是ezmo

  • Java代码实现Map和Object互转及Map和Json互转

    先给大家介绍下map和object互相转换的代码. 具体代码如所示: /** * 使用org.apache.commons.beanutils进行转换 */ class A { public static Object mapToObject(Map<String, Object> map, Class<?> beanClass) throws Exception { if (map == null) return null; Object obj = beanClass.newI

  • JavaScript实现Java中Map容器的方法

    本文实例讲述了JavaScript实现Java中Map容器的方法.分享给大家供大家参考,具体如下: 声明一下,JavaScript和Java的区别就像雷锋和雷峰塔的区别. 在Java中,Map是一种集合,用来存储Key-Value键值对的容器.根据键得到值,因此不允许键重复(重复了的覆盖),但允许值重复.JavaScript中的对象特性,就是不允许有相同的属性存在,和Java的Map非常的相似,所以可以利用这个特性在JavaScript中来实现Map容器,实现基本的增删查的操作. functio

  • JS自定义对象实现Java中Map对象功能的方法

    本文实例讲述了JS自定义对象实现Java中Map对象功能的方法.分享给大家供大家参考.具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容!   这里Key,你要使用String类型,和Java一样,你可以进行一些增加,删除,修改,获得的操作. 使用很简单,我先把工具类给大家看下: 复制代码 代码如下: /**  *

  • javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

    javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(-)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写: {width:27em; white-space:nowrap; text-overflow:ellipsis; -o

  • JS判断鼠标从什么方向进入一个容器实例说明

    JS判断鼠标从什么方向进入一个容器实例说明

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方法,是基于jquery的,说实话,其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白,原文中有一些英文注释我就不一一说明了.代码部分不是

  • 使用GSON库将Java中的map键值对应结构对象转换为JSON

    Map的存储结构式Key/Value形式,Key 和 Value可以是普通类型,也可以是自己写的JavaBean(本文),还可以是带有泛型的List. (GSON的GitHub项目页:https://github.com/google/gson) JavaBean 本例中您要重点看如何将Json转回为普通JavaBean对象时TypeToken的定义. 实体类: public class Point { private int x; private int y; public Point(int

  • JS 仿Flash动画放大/缩小容器

    放大缩小容器 *{margin:0;padding:0;} body { padding:1em; } h2 { font-size:2em; } div { display:inline-block; width:10em; padding:.5em; margin-bottom:1em; overflow:hidden; background:#eee; text-align:center; font-size:1em; } p#text { position:absolute; right

随机推荐