UDN-企业互联网技术人气社区

板块导航

浏览  : 1099
回复  : 2

[原生js] 关于height、offsetheight、clientheight等的区别一览

[复制链接]
独领风骚的头像 楼主
发表于 2017-1-4 16:15:01 | 显示全部楼层 |阅读模式
  平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写。一般这个时候我都是直接的获取一个块的高度.height(),来解决,但是有的时候我翻翻查查发现还有offsetheight,而这两者之间还是有一些差别的。下面都以高度来说,详细的区别在取某块或某元素高度的时候,这些height、offsetheight、clientheight、scrollheight、innerheight、outerheight的不同的地方。
  1. $(function(){
  2.         var h1=$("#box").height();
  3.         var h2=document.getElementById("box2").offsetHeight;
  4.         var h3=document.getElementById("box3").clientHeight;
  5.         var h4=document.getElementById("box4").scrollHeight;
  6.         var h5=$("#box5").innerHeight();
  7.         var h6=$("#box6").outerHeight();
  8.         document.getElementById("box").innerHTML=h1;
  9.         document.getElementById("box2").innerHTML=h2;
  10.         document.getElementById("box3").innerHTML=h3;
  11.         document.getElementById("box4").innerHTML=h4;
  12.         document.getElementById("box5").innerHTML=h5;
  13.         document.getElementById("box6").innerHTML=h6;
  14.     })
复制代码
  1. <div id="box"></div>
  2.    <div id="box2"></div>
  3.    <div id="box3"></div>
  4.    <div id="box4"></div>
  5.    <div id="box5"></div>
  6.    <div id="box6"></div>
复制代码
  1. #box,#box2,#box3,#box4,#box5,#box6{
  2.           width:200px;
  3.           height:200px;
  4.           margin:20px;
  5.           padding:20px;
  6.           border:4px solid #f00;
  7.           background-color:#000;
  8.           color:#eee;
  9.           float:left;
  10.       }
复制代码

  以上是我把所有的取高度的方法都用jquery给取出值并放在各自的框中

  一、先来这个我平时用的比较多的,height

  它主要是返回元素的高度或者说这个div的内容的高度,它是jquery对像,如果只是想取到某个内容的高度,那完全可以使用这个,按照上面所设置的参数,得到的就是200,如图 h1 :
1.jpg

  二、也是平时经常用到的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)也会被包含。

  我完全没考虑过浏览器兼容性问题。。。。后面自己再慢慢琢磨吧

相关帖子

发表于 2017-1-4 16:15:30 | 显示全部楼层
我完全是被标题<<关于height、offsetheight、clientheight等的区别一览>>吸引过来的
使用道具 举报

回复

发表于 2017-1-7 09:56:42 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部