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

js

元素位置大小属性

box.clientWidth //元素的宽度
box.clientHeight //元素的高度
box.offsetLeft // 元素相对父元素的左偏移
box.offsetTop // 元素相对于父元素的上偏移
box.offsetWidth // 元素的宽度
box.offsetHeight // 元素的高度
clientWidth = width+padding
clientHeight = height+padding
offsetWidth = width+padding+border
offsetHeight = 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;
}

事件鼠标位置属性

//事件触发时鼠标的位置，相对于浏览器窗口
clientX
clientY
//事件出发时鼠标相对于屏幕的位置
screenX
screenY
//事件出发时鼠标相对于事件元素的位置
offsetX
offsetY
//
x
y
//由事件对象去调用，'event.'

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

screenX、screenY返回的时事件发生时鼠标相对于屏幕的位置。

窗口位置

//IE、Safari、Opera、Chrome支持
screenLeft
screenRight
//Firefox、Opera、Chrome支持
screenX
screenY
//由window对象去调用

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

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

窗口大小

outerWidth
outerHeight
innerWidth
innerHeight
//由window对象去调用

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

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

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

document.documentElement.clientWidth
document.documentElement.clientHeight
document.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();