- Window的innerHeight和innerWidth属性:返回窗口的文档显示区的高度和宽度
只读属性,声明了窗口的文档显示区的高度和宽度,以像素计。
这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
IE 不支持这些属性。它用 document.documentElement 或 ducument.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。
例1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> test </title>
<meta charset="utf-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
<!--
function init(){
var x = window.document.body.clientWidth;
var y = window.document.body.clientHeight;
document.write(x+"---"+y);
}
//-->
</script>
<body onload = "init()" >
<p>2016/7/14</p>
</body>
</html>
结果显示:
1664---18
- Window的outerHeight和outerWidth返回窗口的外部高度和宽度
outerheight 属性是一个只读的整数,声明了整个窗口的高度。
outerwidth 属性是一个只读的整数,声明了整个窗口的宽度。
注意:教程提醒了IE 不支持此属性,且没有提供替代的属性。但是用IE11测试可以通过并得到数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> test </title>
<meta charset="utf-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
<!--
function init(){
var x = window.document.body.clientWidth;
var y = window.document.body.clientHeight;
var z = window.outerWidth;
var a = window.outerHeight;
document.write(x+"---"+y+"---"+z+"---"+a);
}
//-->
</script>
<body onload = "init()" >
<p>2016/7/14</p>
</body>
</html>
结果显示(IE11):
1664---18---1696---1026
- 设置新窗口高度和宽度
例3:
下面的例子可把新窗口设置为 100x100 像素:
<html>
<body>
<script type="text/javascript">
myWindow=window.open('','')
myWindow.outerheight="100"
myWindow.outerwidth="100"
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
</script>
</body>
</html>
参考:w3school全套教程。