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;
尝试一下 ?
参考文章:
- http://www.w3cschool.cc/jsref/prop-win-innerheight-innerwidth.html;
- http://www.w3cschool.cc/jsref/prop-win-outerheight.html;
- http://www.w3school.com.cn/jsref/prop_win_innerheight_innerwidth.asp;
— EOF — 看完了,留个脚印 ^_^