浅谈一下window窗口的各种宽高属性

renweihub 发布于2019-08-01 16:50 / 2506人阅读

摘要：一常用的宽高属性在日常开发的时候，我们常常需要用到这几个高度信息。二各类宽高说明下的宽高属性最常见的就是了。这个属性表示的是浏览器正文可见区域的高度和宽度。通常情况下所有，下列语句可以判断一个滚动容器是否滚动容器底部

一常用的宽高属性

在日常开发的时候，我们常常需要用到这几个高度信息。浏览器的视口高度和宽度，浏览器的卷动高度，正文内容的总高度等等信息，我在下图中列出了在工作中最常用的几个宽度和高度信息。并在本篇文章中对各种常见宽高进行说明。

二各类宽高说明 2.1 window.innerHeight/window.innerWidth

window下的宽高属性最常见的就是window.innerHeight/window.innerWidth了。这个属性表示的是浏览器正文可见区域的高度和宽度。window.innerHeight包括水平滚动条的部分（如果存在的话，在通常情况下 window.innerHeight == document.body.clientHeight)

2.2 window.outerHeight/window.outerWidth

window.outerHeight和window.outerWidth表示的是浏览器可见区域（正文加上其他的一些乱七八糟的高度和宽度，我自己的理解就是你能一眼看完的所有浏览器区域）

2.3 document.body.scrollHeight/document.body.scrollWidth

document.body.scrollHeight/document.body.scrollWidth表示的是浏览器所有正文部分的高度／宽度（即你一眼看不完的区域的高度和宽度也算在里面）

2.4 document.body.scrollTop/document.body.scrollLeft

这两个高度表示的是水平和垂直滚动条滚动的距离。通常情况下
document.body.scrollTop + window.innerHeight(document.body.clientHeight) = document.body.scrollHeight
document.body.scrollLeft + window.innerWidth(document.body.clientWidth) = document.body.scrollWidth

所有，下列语句可以判断一个滚动容器是否滚动容器底部

element.scrollHeight - element.scrollTop == element.clientHeight

海外云主机私有云 Window窗口对象 windows窗口过程winapi asp获取屏幕的宽高 js_window对象属性

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

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

前端笔记(三) 前端如何防范XSS，浅谈JS中各种宽高属性

摘要：前端如何防范跨站脚本攻击是一种攻击者向用户的浏览器注入恶意代码脚本的攻击。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。不论鼠标指针穿过被选元素或其子元素，都会触发事件。前端如何防范XSS XSS ( Cross Site Scripting ) 跨站脚本攻击, 是一种攻击者向用户的浏览器注入恶意代码脚本的攻击。 XSS攻击的种类：持续型XSS攻击 ...

刘厚水 2019-08-26 11:50 评论0 收藏0
JS、jQuery各种宽高属性

摘要：下各种宽高和下宽高分为挂载在对象和对象下的宽高属性，先说下和的区别对象表示浏览器中打开的窗口，对象可以省略，比如可以简写为对象是对象的一部分，那么我们可以写成，浏览器的文档成为对象下的宽高属性浏览器窗口内部宽度浏览器窗口内部高度浏览器窗口外 JS下各种宽高 Window和Document:JS下宽高分为挂载在Window对象和Document对象下的宽高属性，先说下Window和Do...

CntChen 2019-08-22 10:46 评论0 收藏0
JavaScript中的各种宽高属性

摘要：在中，存在着多的关于高度和宽度的属性，比如等等这么多，傻傻分不清也正常啊。第二问题对象的属性引用的是对象，表示该窗口中当前显示文档的。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 评论0 收藏0
JS动态解析浏览器和网页的各种宽高属性

摘要：获得各种宽高的属性还有公式网页可见区域高滚动条宽度测试的文字网页可见区域宽滚动条宽度测试的文字的总高度滚动条宽度边框宽度测试的文字的总宽度滚动条宽度边框宽度测试的文字的解释元素内容高度的度量，包括由于溢出导致的视图中不可见内容滚动总高度获得各种宽高的属性还有公式 body { padding: 50px; height: 500px; ...

Luosunce 2019-08-02 15:26 评论0 收藏0
JS动态解析浏览器和网页的各种宽高属性

摘要：获得各种宽高的属性还有公式网页可见区域高滚动条宽度测试的文字网页可见区域宽滚动条宽度测试的文字的总高度滚动条宽度边框宽度测试的文字的总宽度滚动条宽度边框宽度测试的文字的解释元素内容高度的度量，包括由于溢出导致的视图中不可见内容滚动总高度获得各种宽高的属性还有公式 body { padding: 50px; height: 500px; ...

XiNGRZ 2019-08-23 18:26 评论0 收藏0