关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别

二、也是平时经常用到的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://www.cnblogs.com/woniubushinide/p/8668100.html

关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别相关推荐

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
[转载]offsetHeight , clientHeight, scrollHeight 区别
我们这里说说四种浏览器对 document.body 的 clientHeight.offsetHeight 和scrollHeight的解释,这里说的是 document.body,如果是 HTML ...
这该死的高度,height,clientHeight,scrollHeight,offsetHeight
引言: 虽然有时候界面的设置不是我们这些后台代码人员的工作,但是有时候却难以理解控件生成时的一些怪事,比方在学习webabcd的扩张GridView中固定列时,你或许已经被其中的height,clie ...
height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
CSS中clientHeight、offsetHeight、scrollHeight、scrollTop、scrollTo几者的区别和关联
怎么区分clientHeight.offsetHeight.scrollHeight.scrollTo.scrollTop呢,我们通过下面的示例来搞清楚. 现有如下示例: 对应css为 .div {w ...
7种Height的比较：screen.height, screen.availHeight, window.innerHeight, window.outerHeight....
这7种高度的基本含义: screen.height:用户屏幕高度 screen.availHeight:用户屏幕可用高度,减去了窗口工具值类的界面特征 window.innerHeight:浏览器窗口 ...
clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
clientHeight、offsetHeight 和 scrollHeight
2019独角兽企业重金招聘Python工程师标准>>> window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeig ...
再次详解clientHeight、offsetHeight、scrollHeight
关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.avail ...
clientHeight、offsetHeight、scrollHeight问题
我们这里说说四种浏览器对 document.body 的 clientHeight.offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HT ...

关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别

关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别相关推荐

最新文章

热门文章