浏览器对象的各种宽高
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器对象的各种宽高相关的知识，希望对你有一定的参考价值。
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个属性
本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1883928
以上是关于浏览器对象的各种宽高的主要内容，如果未能解决你的问题，请参考以下文章