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
用法:返回事件发生时,鼠标指针相对于用户显示器屏幕的左上角水平(垂直)坐标
<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个属性
<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有这两个属性,标准事件没有对应的属性
<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个属性