浏览器对象的各种宽高

简介:

Window对象属性


ScreenLeft/ScreenTop/ScreenX/ScreenY

只读整数,声明了窗口的左上角在屏幕上的 x 坐标 和 y 坐标

IE、Safari 和 Opera 支持 ScreenLeft/ScreenTop

Firefox、Safari 支持 ScreenX/ScreenY

Chrome 都支持

wKiom1hQ1IaDDGLOAAZYPV31wh0583.png


innerWidth/innerHeight

只读属性,声明了窗口的文档显示区的宽度和高度,以像素计。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度

IE 不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。

wKioL1hQ12rjwB0YAABGBGvP7sg351.png



outerWidth/outerHeight

只读属性,声明了整个窗口的宽度和高度

IE不支持此属性,且没有提供代替的属性

wKiom1hQ2PaCQFwGAABIpFoILVw999.png



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

显示器屏幕的宽度/高度,以像素计

wKioL1hQ4Zbzi2zBAAA7yyByMwM477.png



availWidth/availHeight

语法:screen.availWidth

显示浏览器的屏幕的可用宽度/高度,以像素计。在windows操作系统中,这个宽/高度不包括分配给半永久特性(如屏幕底部任务栏)的垂直空间

wKiom1hQ41fRVNrVAAA8lZh3-MM775.png




事件对象


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 >

wKioL1hXWirihHuhAAVZLFuPPL0799.gif



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 >

wKioL1hXXTmQMm05AAZIWLcyKC0056.gif




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 >

wKioL1hXV2XhQmymAARlcTHmwxs043.gif


wKiom1hXXW3hyf1dAACFzsQ11fI575.png



pageX/pageY 事件属性

语法:event.pageX

用法:返回鼠标指针的位置,类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1883928



相关文章
|
6月前
|
JavaScript 前端开发 UED
浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model,简称BOM)是JavaScript中用于操作浏览器窗口和与其相关对象的一种模型。BOM提供了一系列与浏览器窗口进行交互的对象,使得JavaScript可以对浏览器窗口进行控制和操作。其中最核心的对象是window对象,它代表了浏览器窗口本身。
105 1
|
15天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
21 2
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
3月前
|
JavaScript 前端开发
如何让div的宽高始终等于浏览器宽高的一半
如何让div的宽高始终等于浏览器宽高的一半
30 2
|
3月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
45 1
|
3月前
|
JavaScript UED
js之探索浏览器对象模型
js之探索浏览器对象模型
52 0
|
4月前
|
JavaScript
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
48 1
不同的浏览器创建的对象是不同的
不同的浏览器创建的对象是不同的
|
5月前
|
编解码 JavaScript 前端开发
**BOM**是浏览器对象模型,用于控制浏览器窗口
【6月更文挑战第22天】**BOM**是浏览器对象模型,用于控制浏览器窗口,如`window`、`navigator`、`location`等,提供弹窗、定时器及事件处理功能。**DOM**是文档对象模型,将HTML文档转化为可编程的树结构,允许创建、修改元素及处理事件。两者协同工作,赋能JavaScript与网页交互。
29 2
下一篇
无影云桌面