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

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

第一种：window.screen.height

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

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

window.screen.height

当我在我的电脑上打印

window.screen.height

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

第二个属性：window.screen.availHeight

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

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

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

window.screen.availHeight
1057

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

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

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

window.screen.availHeight

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

第三个：document.body.clientHeight

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

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

document.body.clientHeight

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

我屏幕一共才1080

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

第四个:document.documentElement.clientHeight

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

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

document.documentElement.clientHeight

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

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

第五个：window.innerHeight

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

  1. JS对象 屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息。 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽

    屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息. 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽 注意: 1.单位 ...

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

    *screen.width 功能:声明了显示浏览器的屏幕的宽度,以像素计. 语法:screen.width *screen.height 功能:声明了显示浏览器的屏幕的可用宽度,以像素计. 语法:sc ...

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

    window.screen属性所提供的是浏览器以外的信息.这里只简单的概述一下: screen.availWidth - 可用的屏幕宽度 (除去操作系统菜单) screen.availHeight - ...

  4. screen.height && screen.width

    screen.height && screen.width how to get window max width in js screen.height; screen.width; ...

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

    背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...

  6. 拉动滚动条追加内容,无限延伸document高度 $(window).scroll(function(){if($(window).scrollTop() + $(window).height() == $(document).height()) { $("body").append(html) } })

    $(document).ready(function() { // endless scrolling $(window).scroll(function() { if($(window).scrol ...

  7. $(document).height()、$("body").height()、$(window).height()区别和联系

    前言:在此以高度为示例,宽度问题可类推.在移动端开发中,经常遇到需要把一块内容定位于底部的情况,当页面内容不满一屏时,需要设为fixed,而超过 一屏时,需要设为static随页面顶到底部,此时就需要 ...

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

    #dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:10 ...

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

    $(document).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)$(document).scrollLeft() 这是获取水平滚动条的距离 要获取 ...

随机推荐

  1. 放弃采用Mycat的条件

    Mycat::一个新颖的数据库中间件产品 设计使用Mycat时: 满足以下任意一条,请考虑放弃使用MyCat 有非分片字段查询 有分页排序 进行表JOIN操作,除非要确保两个表的关联字段具有相同的数据 ...

  2. 在 C Level 用 dlopen 使用 第三方的 Shared Library (.so)

    http://falldog7.blogspot.com/2013/10/android-c-level-dlopen-shared-library-so.html 在 Android 裡,撰寫 JN ...

  3. 解密百度图片URL

    今天想爬百度图片搜索,但因为爬出来的链接乱七八糟,有些打不开,对于我这个完美主义者而言,这实在是太残酷,但我还是把爬虫过程的核心部分——解密URL给记录下来了. 下图是捕获的json数据的其中一条数据 ...

  4. 淘淘搜索结果中image属性中有多张图片的处理

    solr引擎查询某一个 商品后的结果中,image字段中如果有多张图片路径(用逗号隔开)时,前台会不 显示图片,解决方法如下: package com.taotao.portal.pojo; publ ...

  5. Ubuntu 14.04 64bit下Caffe + Cuda6.5/Cuda7.0 安装配置教程

    http://www.embeddedlinux.org.cn/emb-linux/entry-level/201612/21-6005.html 随着深度学习快速发展的浪潮,许多有兴趣的工作者都转入 ...

  6. Centos6.5+Python2.7 +ffmpeg+opencv2自动安装脚本

    今天安装opencv折腾了多个小时,为以后安装少走弯路,脚本安装 完整 脚本如下: #! /bin/bash sudo yum install -y gcc g++ gtk+-devel libjpe ...

  7. 【BZOJ】1585: [Usaco2009 Mar]Earthquake Damage 2 地震伤害

    [题意]给定无向图,现在可能有一些点已经被删除,只给出信息是c个点未被删除且不能到达结点1,求最少的删除点个数. [算法]最小割 [题解]本题和1的区别是:1求的是最少的不能到达1的结点数,那么就把损 ...

  8. 【BZOJ】1578: [Usaco2009 Feb]Stock Market 股票市场

    [题意]给定s个股票和d天,给出价格矩阵s*d,每天可以买入或卖出整数倍股票,初始资金m,求最大利益.m<=200000,s<=50,d<=10. [算法]完全背包 [题解]关键在于 ...

  9. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  10. 移动端页面使用rem布局

    阿里团队的高清布局方案代码 所谓高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由4个物理像素点组成) 动态设置 html 的font-size, 同时 ...