网页中的坐标

1）屏幕的宽高

screen.width //计算机屏幕的宽

screen.height //计算机屏幕的高

screen.availWidth //计算机屏幕可用宽度，屏幕的像素宽度减去系统部件高度之后的值

screen.availHeight //计算机屏幕可用高度，屏幕的像素高度减去系统部件高度之后的值（不包含底部任务栏的高度）

tips：

screen.width与screen.availWidth相同，screen.height与screen.availHeight相差一个任务栏的高度

2）浏览器窗口位置及大小

window.screenTop //打开的浏览器窗口顶部距计算机屏幕顶部的距离

（会根据窗口的位置的不同而改变，可以获取到窗口左上角据屏幕左上角的距离）

window.screenLeft //打开的浏览器窗口左侧距离计算机屏幕左侧的距离

window.innerWidth //浏览器窗口中可视区域（viewpoint）的宽度 不同浏览器结果一样（常用）

window.innerHeight //浏览器窗口中可视区域（viewpoint）的高度 该值与浏览器是否显示菜单栏等因素有关（常用）

window.outerWidth //浏览器窗口本身的宽度（可视区域宽度+浏览器边框宽度）不同浏览器结果不同

window.outerHeight //浏览器窗口本身的高度

注意：

chrome在最大化时浏览器窗口没有边框值，非最大化时有8px边框

FF（火狐）和IE上下左右有8px的边框宽度

3）元素对象的信息

盒子真实大小： boxWidth = 2margin + 2border + 2padding + width boxHeight = 2margin + 2border + 2padding + height

element.offsetWidth ：获取元素宽度，返回元素的宽度包括边框和填充，但不包括外边距（常用）

element.offsetWidth = 2border + 2padding + width

element.offsetHeight ：获取元素高度，返回元素的高度包括边框和填 充，但不包括外边距（常用） ​ element.offsetHeight = 2border + 2padding + height

element.offsetLeft： 获取元素到屏幕最左侧距离（包括滚动条内的距离），对象相对于版面或由 offsetLeft属性指定的父坐标的计算 左侧位置（常用） ​ element.offsetTop ： 获取元素到屏幕最顶部距离（包括滚动条内的距离），对象相对于版面或由 offsetTop属性指定的父坐标的计算 顶端位置（常用）

element.clientHeight：在页面上返回内容的可视高度（不包括边框和滚动条内的区域） ​ clientHeight = 2*padding + height - scrollbarHeight

element.clientWidth ：在页面上返回内容的可视宽度（不包括边框和滚动条内的区域）

clientWidth = 2*padding + width - scrollbarWidth

element.offsetWidth==element.clientWidth true （在无滚动条时）

获取浏览器可视区宽高（不包括边框，边距或滚动条） ​ var height = document.documentElement.clientHeight; ​ var width = document.documentElement.clientWidth;

获取页面全部区域宽高（包括边框，边距或滚动条） var height = document.documentElement.offsetHeight; var width = document.documentElement.offsetWidth;

element.scrollTop：向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0，其值随着滚动块滚动而变化（常用） ​ element.scrollLeft： 向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0，其值随着滚动块滚动而变化（常用）

document.documentElement.scrollTop,document.documentElement.scrollLeft

获取被滚动条隐藏的高度/宽度

var height = document.documentElement.scrollHeight; ​ var width = document.documentElement.scrollWidth;

element.scrollWidth ：返回元素的整个宽度（包括带滚动条的隐蔽的地方） ​ scrollWidth = 2*padding + width

element.scrollHeight ：返回整个元素的高度（包括带滚动条的隐蔽的地方） ​ scrollHeight = 2*padding + width

4）event对象中的坐标信息

event.pageX:相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的水平距离（IE8不支持）

event.pageY:相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的垂直距离（IE8不支持）与offset效果相同

e.clientX:相对浏览器可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离（常用）（不包括滚顶条内的距离） e.clientY:相对浏览器可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离（常用）（不包括滚顶条内的距离）

event.screenX:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离（与浏览器窗口大小无关） event.screenY:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离（与浏览器窗口大小无关）

event.offsetX:相对于自身的坐标，以自身的border左上角为坐标原点到鼠标所在点的水平距离（包括滚顶条内的距离） event.offsetY:相对于自身的坐标，以自身的border左上角为坐标原点到鼠标所在点的水平距离（包括滚顶条内的距离）