JavaScript获取和设置窗口宽度、高度

最新推荐文章于 2021-06-09 17:27:31 发布

microcosmv

最新推荐文章于 2021-06-09 17:27:31 发布

阅读量3.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 获取窗口高度获取窗口宽度

本文链接：https://blog.csdn.net/microcosmv/article/details/51905968

版权

JavaScript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

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全套教程。

microcosmv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript获取和设置窗口宽度、高度

Window的innerHeight和innerWidth属性只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。 IE 不支持这些属性。它用 document.documentElement 或 ducument.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为
复制链接

扫一扫

专栏目录