Window宽度和高度属性

科学上网教程 | 机场推荐 | 云深不知处(机场)

Window属性：innerWidth,innerHeight,outerWidth,outerHeight的区别整理。

定义和用法

• innerWidth：返回文档显示区域的宽度，不包括菜单栏、工具栏以及滚动条等；
• innerheight：返回文档显示区域的高度，不包括菜单栏、工具栏以及滚动条等；
• outerWidth：返回文档显示区域的宽度，包括菜单栏、工具栏以及滚动条等；
• outerHeight：返回文档显示区域的高度，包括菜单栏、工具栏以及滚动条等；

语法

Get：

• window.innerWidth
• window.innerHeight
• window.outerWidth
• window.outerHeight

Set:

• window.innerWidth=pixels
• window.innerHeight=pixels
• window.outerWidth=pixels
• window.outerHeight=pixels

浏览器支持

除了IE8及更早的IE版本不支持这几个属性外，其他如Chrome等现代浏览器都支持

尝试一下

实例1：

获取窗口的高度与宽度(不包含工具条与滚动条):
var w=window.innerWidth;
var h=window.innerHeight;
尝试一下 ?

实例2：
获取窗口的高度与宽度（包括工具栏/滚动）：
var w=window.outerWidth;
var h=window.outerHeight;
尝试一下 ?

参考文章：

1. http://www.w3cschool.cc/jsref/prop-win-innerheight-innerwidth.html；
2. http://www.w3cschool.cc/jsref/prop-win-outerheight.html；
3. http://www.w3school.com.cn/jsref/prop_win_innerheight_innerwidth.asp；

— EOF — 看完了，留个脚印 ^_^