clientHeight、scrollHeight、offsetHeight和scrollTop之间区别[通俗易懂]
大家好,又见面了,我是你们的朋友全栈君。屏幕可见区域高(内容的可视高度,不包括边框,边距或滚动条):document.body.clientHeight 正文内容高(整个元素的高度,包括带滚动条的隐蔽的地方):document.body.scrollHeight 内容高+padding+边框:document.body.offsetHeight 滚动条已经滚动的高度:document.body.scrollTop
屏幕分辨率高:window.screen.height
一、先来这个我平时用的比较多的,height
它主要是返回元素的高度或者说这个div的内容的高度,它是jquery对像,如果只是想取到某个内容的高度,那完全可以使用这个,按照上面所设置的参数,得到的就是200,如图h1:
二、也是平时经常用到的offsetheight
它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2;
对了,为什么这个offsetheight的用法和height的用法不一样的,因为offsetHeight是js对象所能支持的方法,而$(“”)所获得的是一个jquery对象,他是不支持offsetHeight的。所以只能用js方式来获取啦。
三、我么怎么用的clientHeight和scrollHeight
clientHeight在页面上返回内容的可视高度(不包括边框,边距或滚动条),结果显示上图h3;
scrollHeight返回整个元素的高度(包括带滚动条的隐蔽的地方),它带着滚动条呢,但是一般会用到滚动条的地步么,好吧,我没用到过,也许我写的代码还不够多,结果显示上图h4;
四、关于innerheight和outerheight
这俩我也不咋用过,但是这看名字就基本知道啥区别啥意思了的感觉
innerHeight,inner,inner,里面的里面的,那就是不包括菜单栏、工具栏以及滚动条等的高度只看里面的外面的忽视。为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border,结果显示上图h5。
outerheight顾名思义,outer了都,外面的都要了,获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。返回一个整数(不包含“px”)表示的值 ,或如果在一个空集合上调用该方法,则会返回 null。
在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top,border-bottom ;如果includeMargin参数是true,那么margin (top 和 bottom)也会被包含。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163757.html原文链接:https://javaforall.cn
相关文章
- PLD,CPLD,FPGA区别[通俗易懂]
- 深度学习的深度和宽度的理解[通俗易懂]
- exec与sp_executesql语法的区别详解[通俗易懂]
- 左连接 ,右连接,内连接和全外连接的4者区别[通俗易懂]
- Java中的构造方法[通俗易懂]
- jdk下载/Linux64位 jdk1.8 jdk-8u161下载[通俗易懂]
- 解决打不开SQL Server配置管理器的问题[通俗易懂]
- WiFi(6)和5G的区别及比对[通俗易懂]
- 【Python】python文件打开方式详解——a、a+、r+、w+、rb、rt区别[通俗易懂]
- WrapPanel水平布局保持不换行的写法示例[通俗易懂]
- SVG基本图形[通俗易懂]
- TEXT、TINYTEXT、MEDIUMTEXT、LONGTEXT选择 和 char varchar varchar2 的区别[通俗易懂]
- std::vector初始化[通俗易懂]
- 内核态和用户态的区别[通俗易懂]
- java数独解法[通俗易懂]
- C++爱心代码[通俗易懂]
- 目前什么挖矿软件比较好用?[通俗易懂]
- 振荡周期、时钟周期、机器周期、指令周期的区别与联系[通俗易懂]