浏览器对象的各种宽高

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个属性

时间: 2024-10-16 05:24:16

浏览器对象的各种宽高的相关文章

JS获取浏览器中的各种宽高值

width: clientWidth:对象实际内容的宽度,不包含边线,最大不超过视口宽度 offsetWidth:对象实际宽度,包含边线,最大不超过视口宽度 scrollWidth:对象实际宽度,不包含边线,可超过视口宽度 height:(都可超过视口高度) clientHeight:对象实际内容的高度,不包含边线 offsetHeight:对象实际高度,包含边线 scrollHeight:对象实际高度,不包含边线.如果对象为body,大于视口时为实际高度,小于视口时为视口高度 分辨率宽高: w

JavaScript中元素、文档、浏览器、屏幕的宽高

1. 元素的宽高 以宽为例 元素.style.width    样式的宽度,即写在元素的行内样式表的宽度. 元素.clientWidth    可视区宽,样式宽+padding 元素.offsetWidth    占位宽,样式宽+padding+border 2.文档.浏览器窗口的宽高 以宽为例

Javascript:获取浏览器窗口和屏幕的可用宽高

1.获取浏览器窗口的有效宽高(不包括工具栏和滚动条) 注:对于绝大部分浏览器使用window.innerWidth即可获取宽度,使用document.documentElement.clientWidth || document.body.clientWidth 为了实现对IE6,7的支持. 高度同上. var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var

廖雪峰js教程笔记10 浏览器对象

JavaScript可以获取浏览器提供的很多对象,并进行操作. window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高. 兼容性:IE<=8不支持. 浏览器对象 阅读: 52726 JavaScript可以获取浏览器提供的很多对象,并进行操作. window window对象不但充当全局作用域,而且表示浏览

js_浏览器对象

window window全局作用域,而且表示浏览器窗口 window对象有innerWidth和innerHeight属性,网页净宽高(调整窗口值会变) 兼容性:IE<=8不支持 outerWidth和outerHeight属性,可获取浏览器窗口的整个宽高 navigator navigator表示浏览器信息 navigator.appName:浏览器名称; navigator.appVersion:浏览器版本; navigator.language:浏览器设置语言; navigator.pl

JavaScript 浏览器对象

window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:

js操作DOM对象及怎么获取浏览器宽高

DOM独立于具体的编程语言,通常通过JavaScript访问DOM,不过并不严格要求这样.可以使用任何脚本语言来访问DOM,这要归功于其一致的API.getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素getElementsByTagName_r(name) 返回当前元素中有指定标记名的子元素的数组hasChildNodes() 返回一个布尔值,指示元素是否有子元素getAttribute(name) 返回元素的属性值,属性由name指定有了W3C D

常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

我的个人网站 点击链接!欢迎大家访问 下面是网页一些常见的宽高的获取.........这是原生的写法(JavaScript) 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scro

Js怎么获取DOM及获取浏览器的宽高?

在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM独立于具体的编程语言,通常通过Java