JS中DOM元素获取的宽和高的方法小结

网页可见区域宽： document.body.clientWidth （可变）
网页可见区域高： document.body.clientHeight （可变）
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById(“div”).offsetHeight
元素的实际宽度：document.getElementById(“div”).offsetWidth
元素的实际距离左边界的距离：document.getElementById(“div”).offsetLeft
元素的实际距离上边界的距离：document.getElementById(“div”).offsetTop

下面内容转自他的博客：https://www.cnblogs.com/kongxianghai/p/4192032.html

scrollWidth、clientWidth、offsetWidth的区别

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变

情况1：
元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。
scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2：
元素的内容超过可视区，滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

这里自己总结哒、、、

浏览器的宽和高

window.screen.availHeight：声明了显示浏览器的屏幕的可用高度，固定值，不包含任务栏

window.screen.availWidth): 浏览器的屏幕的宽度=width 1280 固定值

window.screen.height: 浏览器屏幕实际高

window.screen.width: 浏览器屏幕实际宽

window.pageYOffset : 浏览器滚动条的上偏移

window.pageXOffset) :浏览器滚动条的左偏移
说明：
（1）pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
（2） pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。
（3）这些属性是只读的。

window.innerWidth：浏览器可视区域的高
window.innerHeight ：浏览器可视区域的宽

JS中DOM元素获取的宽和高的方法小结相关推荐

js中Dom元素及获取方法
DOM基础对象 document document.documentElement html部分 document.head document.title document.body body部分 ...
JS中DOM元素的操作
一.DOM元素的获取 1)document.getElementsByClassName ( "class") 返回集 htmlcollection ,用法和数组一致说明: cl ...
JS中修改元素内容，属性，样式的方法【详解】
改变元素内容的方法: .innerHTML=内容(可识别标签) .innerText=内容(只识别文本) 如果把属性作为集合,那么样式就是这个集合 ...
js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
JavaScript 教程「9」：DOM 元素获取、属性修改
什么是 Web API Web API 是指网页服务器或者网页浏览器的应用程序接口.简单来讲,就是我们在编写 JavaScript 代码时,可以通过 Web API 来操作 HTML 网页和浏览器. ...
原生JS中DOM节点相关API合集
原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Te ...
【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...

JS中DOM元素获取的宽和高的方法小结

JS中DOM元素获取的宽和高的方法小结相关推荐

最新文章

热门文章