window.innerHeight window.outerHeight 与screen.height

简介: 本文目录1. window2. innerHeight与outerHeight3. screen.height4. 实例

1. window

window是浏览器支持的全局变量,也可以通过document.defaultView获取它,表示浏览器的窗口信息。


2. innerHeight与outerHeight

innerHeight表示窗口内容区域的高度,这是不包括边框、菜单栏的。


而outerHeight是窗口的整体高度,包括边框、菜单栏等。


所以一般常用的是innerHeight。


3. screen.height

screen是指的屏幕,表示当前整个显示器显示的屏幕部分,不限于当前的窗口。height是屏幕的宽度,例如屏幕分辨率1920*1080的话,一般情况下screen.heigth即为1080。


4. 实例

注意width相关的用法是一致的。


看下面的例子:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <script>
      document.writeln("innerHeight:"+window.innerHeight);
      document.writeln("innerWidth:"+window.innerWidth);
      document.writeln("outerHeight:"+window.outerHeight);
      document.writeln("outerWidth:"+window.outerWidth);
      document.writeln("screen.height"+window.screen.height);
      document.writeln("screen.width"+window.screen.width);
    </script>
  </body>
</html>

效果如下:

image.png


相关文章
|
4月前
|
存储 安全 开发者
|
3月前
|
算法 API 图形学
【Qt 学习笔记】QWidget的geometry属性及window frame的影响
【Qt 学习笔记】QWidget的geometry属性及window frame的影响
172 2
|
编解码
怎么解决 ie 中获取 window.screen.width 不正确?
怎么解决 ie 中获取 window.screen.width 不正确?
153 0
怎么解决 ie 中获取 window.screen.width 不正确?
|
JavaScript 前端开发
18、DOM对象(window、screen、location、history、navigation)
18、DOM对象(window、screen、location、history、navigation)
135 0
为什么会有window.window这种设计
为啥要搞这个这个看起来貌似很奇葩的设计。 要解答这个问题,还得请出this,我们经常说浏览器中的全局对象是window, 这句话对了,也还没完全对。 全局对象的真实身份应该是全局作用域的this。 window只是为了便于访问this,弄出来的一个属性。
308 0
为什么会有window.window这种设计
|
JavaScript 前端开发
window.parent ,window.top,window.self 详解及parent和opener的区别
window.parent ,window.top,window.self 详解       在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。
1987 1
解决popup不随着window一起移动的问题
原文:解决popup不随着window一起移动的问题 当我们设置Popup的StayOpen="True"时,会发现移动窗体或者改变窗体的Size的时候,Popup并不会跟随着一起移动位置。为了解决这个问题,可以给Popup定义一个附加属性,代码如下所示: /// /// Popup帮助类...
1105 0
|
Shell
SWT里Slider和Scale的区别
以前以为Slider和Scale之间只是外观的区别,今天发现不是这样的,因为Slider有一个特点:getSelection()能得到的最 大值并不是getMaximum()的值,要减去getThumb()值,后者是中间的滑块所拥有的值,缺省为10,最小为1。
1281 0