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 | 该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话) |
clientHeight | 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。 |
offsetWidth | offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width) |
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
- 1
其次呢,scrollTop与scrollLeft的功能是实时监测被隐藏在内容区域的像素数。通过设置这个属性可以改变元素滚动的位置。
var scrollTop = document.documentElement.scrollWidth || document.body.scrollWidth;
var scrollLeft = document.documentElement.scrollWidth || document.body.scrollWidth;
- 1
- 2
4.event对象中的坐标信息
内容 | 详情 |
---|---|
event.pageX | 相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的水平距离(IE8不支持) |
event.pageY | 相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的垂直距离(IE8不支持) |
event.clientX | 相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离 |
event.clientY | 相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离 |
event.screenX | 相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的水平距离 |
event.screenY | 相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的垂直距离 |
event.offsetX | 相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离 |
event.offsetY | 相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离 |
看图: