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

54 阅读 0 评论 36 点赞

我是靠谱客的博主端庄大船，最近开发中收集的这篇文章主要介绍关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原文：https://www.cnblogs.com/layaling/p/6223372.html

平时，不管在pc端页面还是移动端页面，因为我们一般很少会设置某个块的的高度，但是呢，我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写。一般这个时候我都是直接的获取一个块的高度.height()，来解决，但是有的时候我翻翻查查发现还有offsetheight，而这两者之间还是有一些差别的。下面都以高度来说，详细的区别在取某块或某元素高度的时候，这些height、offsetheight、clientheight、scrollheight、innerheight、outerheight的不同的地方。

$(function(){
        var h1=$("#box").height();
        var h2=document.getElementById("box2").offsetHeight; 
        var h3=document.getElementById("box3").clientHeight;
        var h4=document.getElementById("box4").scrollHeight; 
        var h5=$("#box5").innerHeight();
        var h6=$("#box6").outerHeight();
        document.getElementById("box").innerHTML=h1;
        document.getElementById("box2").innerHTML=h2;
        document.getElementById("box3").innerHTML=h3;
        document.getElementById("box4").innerHTML=h4;
        document.getElementById("box5").innerHTML=h5;
        document.getElementById("box6").innerHTML=h6; 
    })

<div id="box"></div>
   <div id="box2"></div>
   <div id="box3"></div>
   <div id="box4"></div>
   <div id="box5"></div>
   <div id="box6"></div>


#box,#box2,#box3,#box4,#box5,#box6{
          width:200px;
          height:200px;
          margin:20px;
          padding:20px;
          border:4px solid #f00;
          background-color:#000;
          color:#eee;
          float:left;
      }

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

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

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