Window对象属性
ScreenLeft/ScreenTop/ScreenX/ScreenY
只读整数,声明了窗口的左上角在屏幕上的 x 坐标 和 y 坐标。
IE、Safari 和 Opera 支持 ScreenLeft/ScreenTop
Firefox、Safari 支持 ScreenX/ScreenY
Chrome 都支持
innerWidth/innerHeight
只读属性,声明了窗口的文档显示区的宽度和高度,以像素计。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度
IE 不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。
outerWidth/outerHeight
只读属性,声明了整个窗口的宽度和高度
IE不支持此属性,且没有提供代替的属性
pageXOffset/pageYOffset
设置或返回当前页面相对于窗口显示区左上角的 X/Y 位置
Window 对象方法
moveBy( )
语法: window.moveBy(x,y)
相对窗口当前的坐标,把它移动到指定的像素
x:要把窗口右移的像素
y: 要把窗口下移的像素
moveTo( )
语法: window.moveTo(x,y)
把窗口的左上角移动到一个指定的坐标
x:窗口新位置的 x 坐标
y: 窗口新位置的 y 坐标
提示:出于安全方面的原因,浏览器限制此方法使其不能把窗口移出屏幕。
resizeBy( )
语法:resizeBy(width, height)
根据指定的像素来调整窗口的大小
width:必需,要使窗口宽度增加的像素数。可以是正、负数值
height:可选,要使窗口高度增加的像素数。可以是正、负数值
resizeTo( )
语法:resizeTo(width, height)
把窗口的大小调整为指定的宽度和高度
width:必需,想要调整到的窗口的宽度。以像素计
height:可选,想要调整到的窗口的高度。以像素计
scrollBy( )
语法:scrollBy(xnum, ynum)
把内容滚动指定的像素数
xnum:必需,把文档向右滚动的像素数
ynum:必需,把文档向下滚动的像素数
scrollTo( )
语法:scrollTo(xpos, ypos)
把内容滚动到指定的坐标
xpos:必需,要在窗口文档显示区左上角显示的文档的 x 坐标
ypos:必需,要在窗口文档显示区左上角显示的文档的 y 坐标
Screen 对象属性
screen.width/screen.height
显示器屏幕的宽度/高度,以像素计
availWidth/availHeight
语法:screen.availWidth
显示浏览器的屏幕的可用宽度/高度,以像素计。在windows操作系统中,这个宽/高度不包括分配给半永久特性(如屏幕底部任务栏)的垂直空间
事件对象
screenX/screenY 事件属性
语法:event.screenX
用法:返回事件发生时,鼠标指针相对于用户显示器屏幕的左上角水平(垂直)坐标
1
2
3
4
5
6
7
8
9
10
11
12
|
<
body
>
<
div
id
=
"box"
></
div
>
<
script
>
var box = document.getElementById('box');
box.addEventListener('click',function(event){
var screenX = event.screenX;
var screenY = event.screenY;
alert('指针相对于屏幕显示器左上角的X坐标是:'+screenX+', 指针相对于屏幕显示器左上角的Y坐标是:'+screenY);
})
</
script
>
|
clientX/clientY 事件属性
语法:event.clientX
用法:返回事件发生时,鼠标指针相对于浏览器窗口可视区域的水平(垂直)窗口坐标。可视区域不包括工具栏和滚动条,IE事件和标准事件都定义了这2个属性
1
2
3
4
5
6
7
8
9
10
11
|
<
div
id
=
"box"
></
div
>
<
script
>
var box = document.getElementById('box');
box.addEventListener('click',function(event){
var clientX = event.clientX;
var clientY = event.clientY;
alert('指针相对于文档可视区的X坐标是:'+clientX+', 指针相对于文档可视区的Y坐标是:'+clientY);
})
</
script
>
|
offsetX/offsetY 事件属性
语法:event.offsetX
用法:返回鼠标指针的位置,相对于事件源元素的水平(垂直坐标),只有IE有这两个属性,标准事件没有对应的属性
1
2
3
4
5
6
7
8
9
10
11
12
|
<
body
>
<
div
id
=
"box"
></
div
>
<
script
>
var box = document.getElementById('box');
box.addEventListener('click',function(event){
var offsetX = event.offsetX;
var offsetY = event.offsetY;
alert('指针相对于box的X坐标是:'+offsetX+', 指针相对于box的Y坐标是:'+offsetY);
})
</
script
>
|
pageX/pageY 事件属性
语法:event.pageX
用法:返回鼠标指针的位置,类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性
本文转自 frwupeng517 51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1883928