1.获取窗口位置及其大小
内容 | 作用 |
---|---|
window.screenTop | 窗口顶部到屏幕顶部的距离 |
window.screenLeft | 窗口左部到屏幕左部的距离 |
window.innerWidth | 窗口中可视区域的宽度 |
window.innerHeight | 窗口中可视区域的高度 |
window.outerWidth | 浏览器窗口本身的宽度(可视区域+浏览器边框) |
window.outerHeight | 浏览器窗口本身的高度 |
如下图所示:
注意: chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框 FF和IE上下左右有8px的边框宽度
2.获取屏幕的宽高
内容 | 作用 |
---|---|
screen.width | 屏幕的宽 |
screen.height | 屏幕的高 |
screen.availWidth | 屏幕可用宽度 减去任务栏 |
screen.availHeight | 屏幕可用高度 减去任务栏 |
3.元素对象的信息(重点)
下面看一下元素对象中的位置信息。。
内容 | 作用 |
---|---|
clientWidth | 在页面上返回内容的可视宽度(不包括边框,边距或滚动条) |
clientHeight | 在页面上返回内容的可视高度(不包括边框,边距或滚动条) |
offsetWidth | 返回元素的宽度包括边框和填充,但不包括边距 |
offsetHeight | 返回元素的高度包括边框和填充,但不包括边距 |
offsetLeft | 相对于父元素的距离 |
offsetTop | 获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置 |
scrollWidth | 在没有滚动条的情况下,元素内容的总宽度 |
scrollHeight | 在没有滚动条的情况下,元素内容的总高度 |
scrollTop | 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素滚动的位置 |
scrollLeft | 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素滚动的位置 |
下来我们看图解:
1.客户区大小: clientWidth与clientHeight(不包括边框)
2.偏移量:offsetWidth、offsetHeight、offsetLeft、offsetTop
3.滚动大小:scrollWidth、scrollHeight、scrollTop、scrollLeft
有些元素(例如元素),即是没有执行任何代码也会自动添加滚动条;但是另外一些元素,则需要通过CSS的overflew属性进行设置才能使用。
scrollWidth、scrollHeight主要用于确定元素内容的实际大小。例如,通常认为元素实在Web浏览器的视口中滚动的元素。因此,带有垂直滚动条的页面总高度就是
document.documentElement.scrollHeight
其次呢,scrollTop与scrollLeft的功能是实时监测被隐藏在内容区域的像素数。通过设置这个属性可以改变元素滚动的位置。
var scrollTop = document.documentElement.scrollWidth || document.body.scrollWidth;
var scrollLeft = document.documentElement.scrollWidth || document.body.scrollWidth;
4.event对象中的坐标信息
内容 | 详情 |
---|---|
event.pageX | 相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的水平距离(IE8不支持) |
event.pageY | 相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的垂直距离(IE8不支持) |
event.clientX | 相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离 |
event.clientY | 相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离 |
event.screenX | 相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的水平距离 |
event.screenY | 相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的垂直距离 |
event.offsetX | 相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离 |
event.offsetY | 相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离 |
看图: