JS中的位置与大小

Developer 发布于2019-08-19 18:48 / 2303人阅读

摘要：客户区大小元素的客户区大小指的是元素内容机器内边距占据空间的大小。滚动大小和主要用于确定元素内容的实际大小。窗口大小在现代主流浏览器中提供了四个属性确定窗口的大小，分别为和。

原文链接：http://mrzhang123.github.io/2016/08/03/js-position/

最近事儿比较多，一直没时间写东西，前几天又遇到关于获取元素大小的问题，每次遇到这类问题就翻书，比较费时间，所以总结一下。

1.元素的偏移量

元素的偏移量包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意：这里并不包括外边距）。

2.客户区大小

元素的客户区大小指的是元素内容机器内边距占据空间的大小。

要确定浏览器可见窗口的大小，可以使用document.documentElement或document.body（IE7之前的版本中）。

从以上两个我们可以看出元素偏移量（offset）与客户区大小（client）的区别在于有没有包含边框，客户区大小不包含边框。

3.滚动大小

scrollWidth和scrollHeight主要用于确定元素内容的实际大小。所以带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

4.窗口大小

在现代主流浏览器中提供了四个属性确定窗口的大小，分别为：innerWidth、innerHeight、outerWidth和outerHeight。

4.1. outerWidth和outerHeight

返回浏览器窗口本身的尺寸（无论是从外层的window对象还是从某个框架访问）

4.2. innerWidth和innerHeight

返回该容器中页面试图去的大小（减去边框宽度）

注意：

这里在《javascript高级程序设计》（第三版）中写道在chrome中outer与inner返回的值是一样的，这算是chrome的一个bug，我在chrome 53中已经修复，但是在QQ浏览器中（内核为chromium47）依旧是相等的，这需要注意！
clientWidth和clientHeight。

在主流浏览器中，document.docuementElement.clientWidth和document.documentElement.clientHeight中保存的是页面视口信息。返回的值与window.innerHeight，window.innerWidth一样。
但是window.innerHeight在IE8及以下浏览器中结果是undefined，而document.documentElement.clientHeight还有值。所以在各个浏览器下取得页面视口大小的代码如下：

var pageWidth=window.innerWidth,
    pageHeight=window.innerHeight;
if(typeof pageWidth !== "number"){
    if(document.compatMode === "CSS1Compat"){
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight;
    }else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
}

代码中document.compatMode用于判断浏览器处于什么模式，它有两个值：
BackCompat:浏览器处于怪异模式
CSS1Compat:浏览器处于标准模式
不同模式下，获取浏览器的宽度的方法不同，在代码中已经做了判断。

云服务器私有云 js中的this与html js 函数位置 idc机房大小与机柜数量 js域名物理位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80017.html

有了 TensorFlow.js，浏览器中就能进行实时人体姿势判断

摘要：反馈检测到的每个人的置信度值以及检测到的每个姿势关键点。姿势置信度这决定了姿势判断的整体置信度。在较高级别，这将控制回馈的姿势较低置信度分数。只有在调整姿势置信度得分不够好的情况下，为了过滤掉不太准确的姿势，该数值应该增加或减少。文 / Dan Oved，Google Creative Lab 的自由创意技术专家，纽约大学 ITP 的研究生。编辑和插图 / 创意技术专家 Irene Alv...

KaltZK 2019-04-25 18:28 评论0 收藏0
js操作浏览器窗口及元素大小

摘要：在中上面的两组属性相同，都表示视口的大小，而不是浏览器窗口的大小。但在其他浏览器中，后面的这两个属性表示的是整个页面布局视口，也就是页面选然后的实际大小。元素在水平方向桑占用的空间的大小。 1、窗口位置窗口对象对应的是window对象。在window对象中使用属性screenTop、screenLeft、screenY和screenX（单位为像素）两组属性来表示窗口相对于屏幕上边和左...

Martin91 2019-08-19 18:05 评论0 收藏0
JS数据类型与内存堆栈

摘要：所以相对于简单数据类型而言，他们占用内存比较小，如果放在堆中，查找会浪费很多时间，而把堆中的数据放入栈中也会影响栈的效率。六总结本文总结了数据类型及其声明赋值更新时在内存堆栈中的表现，可以更深入的理解这些数据类型。 JS数据类型与内存堆栈一、前言 JS的数据类型已经是大家都很熟悉的东西了，但是大家是否对这些数据类型在内存中的分配了解，甚至在操作这些变量时，内存中是如何表现的，本文...

nodejh 2019-08-23 10:33 评论0 收藏0
Web性能优化

摘要：性能优化网站的性能细线在几个方面网站首页加载速度动画的流畅度通过分析浏览器的渲染原理资源对渲染的影响，得出优化网站性能的办法。查看性能的工具的面板录制网页加载的过程，分析记录浏览器渲染过程中每个过程的耗时。通过引入，可以避免阻塞。 1 Web性能优化 Web网站的性能细线在几个方面：网站首页加载速度动画的流畅度通过分析浏览器的渲染原理、资源对渲染的影响，得出优化网站性能的办法...

ZHAO_ 2019-08-21 11:39 评论0 收藏0
深入前端-彻底搞懂浏览器运行机制

摘要：当这些异步任务发生的时候，它们将会被放入浏览器的事件任务队列中去，等到运行时执行线程空闲时候才会按照队列先进先出的原则被一一执行，但终究还是单线程。浏览器是多进程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser进程：浏览器的主进程（负责协调、主控），只有一个。负...

YPHP 2019-08-02 15:30 评论0 收藏0