博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器对象的各种宽高
阅读量:6218 次
发布时间:2019-06-21

本文共 2637 字,大约阅读时间需要 8 分钟。

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

转载地址:http://stlja.baihongyu.com/

你可能感兴趣的文章
解决IE11 Array没有find的方法
查看>>
webpack 引入jquery和第三方jquery插件
查看>>
损失函数的概率验证及性质
查看>>
C#-----------------------------回收机制中Destroy与null的作用
查看>>
mysql读写分离总结
查看>>
ubuntu默认防火墙
查看>>
使用 GeoIP2 获取 IP 的地理位置
查看>>
详解spl_autoload_register()函数
查看>>
微软Azure AspNetCore微服务实战第2期
查看>>
Deepin-安装QQ音乐(Windows程序)
查看>>
Spring Boot 2.0(七):Spring Boot 如何解决项目启动时初始化资源
查看>>
移动手机号神州行去香港购买境外流量包方法和注意事项
查看>>
OpenResty(nginx+lua) 入门
查看>>
斗地主AI算法——第二章の数据结构
查看>>
【转】Go maps in action
查看>>
安卓巴士精选Android开发教程
查看>>
c++中捕捉内存泄露、异常
查看>>
Spark 优化器 ML的论文
查看>>
Spring透过ApplicationListener来触发contextrefreshedevent事件
查看>>
socket连接和TCP连接的关系
查看>>