BOM中的高度属性主要涉及三块：screen、window、文档下的元素。

screen

其中screen最简单，代表着显示器的对象。

screen.height ：屏幕高度，像素为单位。

screen.availHeight :屏幕高度送去Windows系统的任务栏的高度。

从左到右，分别是Edge Chrome Firefox。因为是同一个屏幕，所以三者的结果都是相同的。

screen.width 和 screen.availWidth 类似。因为水平方向没有任务栏，所以 screen.width == screen.availWidth 。

window

这里的window代表浏览器窗口，关于高度有两个：

  • innerHeight
  • outerHeight

window.outerHeight : 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边和窗口调整边框。

window.innerHeight : 浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它。

关于window的宽度类似：

  • window.outerWidth : 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边和调整窗口大小的边框。
  • window.innerWidth : 浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。

文档下的元素

文档下的元素的高度信息主要通过clientHeight这一属性获得。

clientHeight:

返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

在下图中，element.clientHeight就是红色框内的高度。

关于文档中元素的clientHeight，我们主要关注这两个元素的：

  • document.documentElement
  • document.body

什么是 document.documentElement 元素呢？它代表着一个文档的根元素，如HTML文档的 <html> 元素,XML文档的根元素等等。

三者的关系

window.innerHeight document.documentElement.clientHeight 和 document.body.clientHeight 之间有什么关系呢？

window.innerHeight = document.documentElement.clientHeight +水平方向滚动条高度

Edge：因为没有水平方向滚动条，所以两者值相同

Chrome:因为有水平方向的滚动条，所以 window.innerHeight 比 document.documentElement.clientHeight 多了17px

而 document.body.clientHeight 就是body标签内的元素所占的高度（除了border和margin）。

clientHeight offsetHeight scrollHeight之间的关系

用一张图来说明，红色框中的是当前元素。

clientHeight :只有元素的内容区和padding

offsetHeight :元素的内容区 padding border margin scrollbar

scrollHeight :元素内容的实际高度，包含了溢出的部分

scrollTop :元素距离他容器顶部的像素距离

BOM中的各种height的更多相关文章

  1. css中的width,height，属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

  2. K3精益版给物料添加属性，并在BOM中新增字段引用该属性

    1.给物料新增属性 打开“系统--基础资料--公共资料--核算项目管理”,然后双击物料,弹出核算项目类别-修改对话框.再点新增按钮: 输入你想新增字段的类型,长度,想要放置的位置. 相关属性里面选的是 ...

  3. JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;

    JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...

  4. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  5. 【CSS中width、height的默认值】

    对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...

  6. js中不同的height, top的对比

    每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...

  7. CSS中详解height属性

    目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...

  8. 解决在vue中设置的height: 100%没有效果

    在新的页面设置height无效果的时候.需要改动App这个文件的heigth 解决办法.给app这个盒子设置高度.默认情况下为0 设置高度100%时,div的高度会等同于其父元素的高度.而上面中id为 ...

  9. jQuery中animate的height的自适应

    可以用 animate() 方法几乎可以操作大部分CSS 属性,但其属性的值不能为字符串,很多人都遇到过这个问题.   例如:获取一个元素自适应时的高,但el.animate({height:‘aut ...

随机推荐

  1. WinForm中控件位置不随窗体大小的变化而改变

    背景:在窗体开发中使控件的位置不随窗体的大小改变而变化的问题?这是一个同事在开发时遇到的问题,在思考试错之后,写出如下代码. 声明成员: Point m_InitLocation; Size m_In ...

  2. pt-online-schema-change的原理解析与应用说明

          PERCONA提供了若干管理维护MySQL的小工具,集成在 PERCONA Toolkit工具中,有慢查询分析.主从差异对比.主从差异修复及在线表结构修改等工具,个人觉得挺好用的.本文简单 ...

  3. linux系统中.bashrc的妙用

    一.有何作用 .bashrc - The individual per-interactive-shell startup file. .bashrc - 主要保存个人的个性化设置,如命令别名.路径等 ...

  4. IO和socket编程

    五一假期结束了,突然想到3周前去上班的路上看到槐花开的正好.放假也没能采些做槐花糕,到下周肯定就老了.一年就开一次的东西,比如牡丹,花期也就一周.而花开之时,玫瑰和月季无法与之相比.明日黄花蝶也愁.想 ...

  5. JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎

    上篇博客我们聊了<JavaEE开发之SpringBoot工程的创建.运行与配置>,从上篇博客的内容我们不难看出SpringBoot的便捷.本篇博客我们继续在上篇博客的基础上来看一下Spri ...

  6. Linux之定时任务

    定时任务Crond介绍 Crond是linux系统中用来定期执行命令/脚本或指定程序任务的一种服务或软件,一般情况下,我们安装完Centos5/6 linux操作系统之后,默认便会启动Crond任务调 ...

  7. mysql5.7.16二进制安装

    1.下载二进制文件  cd /data  wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.16-linux-glibc2.5-x ...

  8. linux优化之SElinux关闭

    查看selinux状态: # getenforce   注:Enforcing表示开启,Permissive表示禁用 临时关闭或开启selinux: # setenforce  [1|0]  注:1是 ...

  9. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  10. [刷题]算法竞赛入门经典(第2版) 5-8/UVa230 - Borrowers

    //又开学啦,不知不觉成为大二的老人了...时间过得好快啊,感觉好颓废... 题意:建立一个借书/归还系统.有借.还.把还的书插到书架上这三个指令. 代码:(Accepted, 0ms) //UVa2 ...