js、jQuery中的距离位置参数【持续更新】

js

---

元素位置大小属性

box.clientWidth //元素的宽度box.clientHeight //元素的高度box.offsetLeft // 元素相对父元素的左偏移box.offsetTop // 元素相对于父元素的上偏移box.offsetWidth // 元素的宽度box.offsetHeight // 元素的高度clientWidth = width+paddingclientHeight = height+paddingoffsetWidth = width+padding+borderoffsetHeight = height+padding+border

获取元素相对于窗口的位置：

var getElePos（e){    var pos={top,left};    pos.top += e.offsetTop;    pos.left += e.offsetLeft;    if(e.offsetParent!=null){        pos.top += getElePos(e.offsetParent).top;        pos.left += getElePos(e.offsetParent).left;    }    return pos;}

---

事件鼠标位置属性

//事件触发时鼠标的位置，相对于浏览器窗口clientXclientY//事件出发时鼠标相对于屏幕的位置screenXscreenY//事件出发时鼠标相对于事件元素的位置offsetXoffsetY//xy//由事件对象去调用，'event.'

事件触发时，事件绑定的处理函数会接收到一个event对象，包含着关于事件的信息。clientX、clientY便是其中属性之一，返回的是事件发生时鼠标的水平坐标和垂直坐标。水平坐标是距离浏览器窗口左边，垂直坐标是浏览器窗口上边。
screenX、screenY返回的时事件发生时鼠标相对于屏幕的位置。

---

窗口位置

//IE、Safari、Opera、Chrome支持screenLeftscreenRight//Firefox、Opera、Chrome支持screenXscreenY//由window对象去调用

这四个参数表示窗口相对于屏幕左边和上边的位置。

兼容获取窗口位置：    var leftPos = (typeof window.screenLeft=="number")?window.screenLeft:window.screenX;    var topPos = (typeof window.screenTop=="number")?window.screenTop:window.screenY;

---

窗口大小

outerWidthouterHeightinnerWidthinnerHeight//由window对象去调用

outerWidth、outerHeight这两个参数返回的返回的是浏览器本身的尺寸，无论是从最外层的window对象还是从某个框架访问。但是在Opera中，返回的则是页面视图容器（Opera中单个标签对应的浏览器窗口）的大小。

innerWidth、innerHeight这两个参数表示该容器页面视图区的大小（减去边框宽度）。Chrome中的四个参数值都相等，都为视口大小。

除此之外,DOM还提供了页面可见区域的相关信息：

document.documentElement.clientWidth document.documentElement.clientHeightdocument.body.clientWidth //IE6混杂模式时使用document.body.clientHeight //IE6混杂模式时使用

前两者，IE、FF、Safari、Opera、Chrome均支持，但在IE6中，标准模式才有效。
IE6的混杂模式下，应该使用后两者。Chrome的混杂模式，四个参数均有效。

兼容获取视口大小：    var pageWidth = window.innerWidth,        pageHeight = window.innerHeight;    if(typeof pageWidth!="number"){        if(document.compatMode=="CSS1Compat"){            pageWidth=document.documentElement.clientWidth;            pageHeight=document.documentElement.clientHeight;        }else{            pageWidth=document.body.clientWidth;            pageHeight=document.body.clientHeight;        }    }

【名词解释】
标准模式 ：document.compatMode==”CSS1Compat” 让IE的行为更接近标准行为
混杂模式：document.compatMode==”” 混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作。

---

jQuery

---

jQuery提供了几个获取宽高的方法

1、实际内容的宽高（content）：width()、height()
2、加padding的宽高：innerWidth()、innerHeight()

innerWidth() = width() + padding;innerHeight() = height() + padding;

3、加padding、border的宽高：outerWidth()、outerHeight()

outerWidth() = width() + padding + border;outerHeight() = height() + padding + border;

4、加margin的宽高：outerWidth(true)、outerHeight(true)

outerWidth(true) = width() + padding + border + margin;outerHeight(true) = height() + padding + border + margin;

5、 获取或者设置元素的滚动的距离:.scrollTop() .scrollLeft()顶部及左边为0；
获取：不带参数

$(selecter).scrollTop();$(selecter).scrollLeft();

设置：带参数

$(selecter).scrollTop(value);$(selecter).scrollLeft(value);

value: 此值为绝对值，不带单位

6、.offset() 元素相对于视口左上角的坐标值

7、.position() 元素相对于.offsetParent()返回元素的左上角的坐标值

实际使用：

1、获取当前窗口可视大小

$(window).width();$(window).height();

2、获取当前窗口文档大小

$(document).width();$(document).height();