window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight

说这几个属性前 我说一下我的设备

我的设备有两个,一个高度为1080的显示器,一个高度为800的电脑

第一种:window.screen.height

这个方法是获取用户电脑屏幕的高度,是不关浏览器或者顶部工具栏跟底部工具栏的高度的

当我在高度为1080的我的显示屏屏幕上打印

window.screen.height
1080

当我在我的电脑上打印

window.screen.height
800

是的 ,这个属性就是电脑的高度

第二个属性:window.screen.availHeight

这个属性,看字面意思,顾名思义,就是电脑屏幕的可用高度,

那当然就是电脑屏幕减掉顶部工具栏跟底部工具栏的高度

我在显示器上打印了这个属性,会得到以下

window.screen.availHeight1057

1057是等于=1080(电脑屏幕)-23(顶部工具栏)

因为我的显示器上面没有底部工具栏

好,现在我在我的电脑上打印

window.screen.availHeight
714

是714=800-顶部工具栏(22)-底部工具栏(64)

第三个:document.body.clientHeight

这个属性只跟浏览器的高度有关

当时我在显示器上打印的时候,我打印来

document.body.clientHeight
3367

我一脸懵逼,这怎么会有三千多高度呢

我屏幕一共才1080

后来我才想通,是浏览器里面的整个页面高度,因为我打开一个页面调试的时候是有滚动条的

第四个:document.documentElement.clientHeight

这个属性就是只跟浏览器有关,是浏览器里面的页面的可用可见高度

就还是我刚才那个显示器打印

document.documentElement.clientHeight
880

是的 我想说的就是这些了,反正我研究了一下这个之后,对这几个获得高度的属性差不多知道了

还有什么的话欢迎各位补充哦

时间: 2024-12-15 01:28:07

window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight的相关文章

javascript宿主对象之window.screen、window.close()/open()、window.moveTo、window.resizeTo

window.screen属性所提供的是浏览器以外的信息.这里只简单的概述一下: screen.availWidth - 可用的屏幕宽度 (除去操作系统菜单) screen.availHeight - 可用的屏幕高度(除去操作系统菜单) screen.width - 总分辨率宽度 screen.height - 总分辨率高度 window.open属性是一个我们打开新窗口的方法,主要接收一下参数: 1. 要载入窗口的URL 2. 新窗口的名字,用于新窗口form标签的taeget属性: 3. 以

网页Screen width、height、availWidth、availHeight属性

*screen.width 功能:声明了显示浏览器的屏幕的宽度,以像素计. 语法:screen.width *screen.height 功能:声明了显示浏览器的屏幕的可用宽度,以像素计. 语法:screen.availWidth *screen.availWidth 功能:声明了显示浏览器的屏幕的可用宽度,以像素计. 语法:screen.availWidth *screen.availHeight 功能:声明了显示浏览器的屏幕的可用高度,以像素计.这个可用高度不包括分配给半永久特性(如屏幕底部

$(document).height 与$(window).height的区别

$(document).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)$(document).scrollLeft() 这是获取水平滚动条的距离 要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了 要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了 注意:$(window).height() 和 $(document).heig

document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确获取,代码没有问题: 解决方案:通过 cosole.log寻找错误点发现$(window).height()获取不正常并等于$(document).height():网上查找资料是由于没有正确的HTML5文档声明导致的 正确: <!DOCTYPE html> <html> <!-

$(document).height()、$(&quot;body&quot;).height()、$(window).height()区别和联系

前言:在此以高度为示例,宽度问题可类推.在移动端开发中,经常遇到需要把一块内容定位于底部的情况,当页面内容不满一屏时,需要设为fixed,而超过 一屏时,需要设为static随页面顶到底部,此时就需要通过判断$(document).height()和$(window).height()的大 小来区分内容是否超屏. $(document):整个文档 $("body"):body $(window):视口(有设doctype的前提下) 1).页面内容大于视口(浏览器窗口)时:$(docum

网页上弹出pop窗口实例,(document).height()与$(window).height()的区别

#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}        #dvpop{position:absolute;display:none;width:auto; height:auto; z-in

window.location.href和window.open的几种用法和区别

使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了. 一.location.href常见的几种形式 目前在开发中经常要用到的几种形式有: 1 2 3 4 5 6 self.location.href;//当前页面打开URL页面 window.location.href;//当前页面打开URL页面 this.location.href;//当前页面打开URL页面 location.h

JavaScript中window.open()打开与window.close()关闭

close()关闭窗口,语法书写如下,其次使用close()在打开新窗口的同时,关闭该窗口,是看不到被打开窗口的 1 window.close();//关闭本窗口 2 <窗口对象>.close();//关闭指定的窗口 代码展示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript中window.open()

window.location.href和window.location.replace的区别

在页面中逐级进行点击请求以下页面:a.html->b.html->c.html window.location.href 做跳转 window.history.go(-1);window.history.back(); 方法时,会向服务器进行请求,根据服务器记录的请求进行跳转,因此会正确返回对应的页面a.html. window.location.replace 做跳转 window.history.go(-1);window.history.back(); 方法时,不会向服务器进行请求,因此