欢迎光临
一个有态度、有温度的分享型博客

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 — 看完了,留个脚印 ^_^

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址