首页 web前端 js教程 js中常用获取窗口尺寸的属性有哪些

js中常用获取窗口尺寸的属性有哪些

Sep 08, 2017 am 09:08 AM
javascript 尺寸 属性

window.innerHeight(innerWidth):表示可见区域的高度(宽度),如果底部(右侧)有滚动条,会把底部(右侧)滚动条的高度(宽度)计算进去,此方法适用于标准浏览器及IE9+

document.documentElement.clientHeight(clientWidth):表示可见区域的高度(宽度),不会把滚动条的高度宽度计算进去,此方法适用于标准浏览器及低版本IE标准模式

document.documentElement.offsetHeight(offsetWidth):首先offsetWidth获得的值与clientWidth一样,而offsetHeight获得的是整个文档的高度。

注意:
个人认为上面的documentElement不代表body。当一个element有border时,element.offsetHeight包含border的值,而element.clientHeight不包含border的宽度。

document.documentElement.scrollHeight(scrollWidth):获得网页正文全文高和宽,包含边线宽度。

document.body.clientHeight(clientWidth):首先clientWidth获得的值等于document.documentElement.offsetWidth剪去body边线宽度,而clientHeight获得的是整个body的高度减去边线宽度。

document.body.offsetHeight(offsetWidth):获得的值等于document.body.clientHeight(clientWidth)加上body的边线(border)宽度,即这两个值取到到的包含边线宽度。

document.body.scrollHeight(scrollWidth):获得网页正文全文高和宽,包含边线宽度。

document.body.scrollTop(scrollLeft):浏览器窗口顶部与文档顶部之间的距离(浏览器窗口与文档左侧之间的距离),也就是滚动条滚动的距离。

window.pageYOffset(pageXOffset):浏览器窗口顶部与文档顶部之间的距离(浏览器窗口与文档左侧之间的距离),也就是滚动条滚动的距离。

window.screen.height(width):屏幕分辨率的高(宽)。

window.screen.availHeight(availWidth):屏幕可用工作区高(宽)。

下面我们来解释一下offsetTop、clientTop、scrollTop分别代表什么:

offsetTop:距离上方或上层控件的位置,整型,单位像素。

clientTop:元素的内容区距离元素边缘的距离,即元素的边线宽度。

scrollTop:元素窗口顶部与元素顶部之间的距离,即元素内部滚动条滚动的距离。

以上是js中常用获取窗口尺寸的属性有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

a4纸尺寸是多少厘米 a4纸尺寸是多少厘米 Feb 11, 2024 pm 11:51 PM

a4纸现在用于的地方有很多,比如说办公、学习等等,现在复印所用到的纸张基本上都是a4纸,有很多的小伙伴不知道a4纸尺寸是多少厘米的现在就来看一下吧。一、尺寸A4纸规格为21cm×29.7cm(210mm×297mm),世界上多数国家所使用的纸张尺寸都是采用这一国际标准。二、由来A4纸是210mm×297mm的由来。原因一:一张长为2,宽为X的矩形,对折之后长宽分别是X和1,那么为了保证相似,就要求1:X=X:2。得到的比例为。然而297除以210,得到的是1.414,接近于,而这个比例正是一张纸

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

a4纸尺寸是几比几 a4纸尺寸是几比几 Apr 25, 2024 am 11:55 AM

1、A4纸张的长宽比不同于常见的2:3或3:4。它的独特比例为√2:1,使其在众多纸张尺寸中脱颖而出。2、这特殊的比例为A4纸张提供了理想的视觉效果和实用性。

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

怎么把照片变小尺寸「新手必看:压缩图片大小详细步骤」 怎么把照片变小尺寸「新手必看:压缩图片大小详细步骤」 Feb 06, 2024 pm 06:55 PM

很多朋友用相机记录自己的生活习惯吧,有些专业摄影的朋友可能还会用单反相机拍摄更清晰的照片。但是单反相机拍出来的照片虽然清晰,但对于一张几十兆的照片来说,无疑会增加存储设备的压力。那么,有什么办法可以在尽量保留画面细节的同时,减少照片体积呢?其实压缩图片就好了。那么怎么压缩图片大小呢?下面就分享两个好方法。方法一:我们可以在美图工具中将图片导入,无需进行其他处理和编辑。保存图片时,系统会提供画质调整选项,我们可以拖动滑块调整保留的清晰度。当预估大小满足需求时,点击保存即可。方法二:①.先打开这款“

CSS中bottom属性语法 CSS中bottom属性语法 Feb 21, 2024 pm 03:30 PM

CSS中bottom属性语法及代码示例在CSS中,bottom属性用于指定一个元素与容器底部之间的距离。它可以控制一个元素相对于其父元素底部的位置。bottom属性的语法如下:element{bottom:value;}其中,element表示要应用该样式的元素,value表示要设置的bottom值。value可以是一个具体的长度值,比如像素

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

炉石传说绝望线缕属性介绍 炉石传说绝望线缕属性介绍 Mar 20, 2024 pm 10:36 PM

绝望线缕是暴雪娱乐旗下佳作《炉石传说》中的一张稀有卡牌,在“威兹班的工坊”卡包中有机会获得。可消耗100/400点奥术之尘合成普通/金色版本。炉石传说绝望线缕属性介绍答:在威兹班的工坊卡包中有几率获得,也也可以通过奥术之尘合成。稀有度:稀有类型:法术职业:死亡骑士法力值:1效果:使所有随从获得亡语:对所有随从造成1点伤害

See all articles