offsetHeight 和 clientHeight 有什么区别？

OffsetHeight：该属性有助于以像素为单位测量元素的可见高度，包括 CSS 属性，如元素可见内容、垂直填充、边框和滚动条，但不包括顶部和底部边距。

offsetHeight = Visible content + padding + border + scrollbar

ClientHeight：该属性有助于以像素为单位测量元素的内部高度，包括 CSS 属性（如padding ），但不包括水平滚动条高度、边框或边距。

clientHeight = Visible content + padding

例子：

  

    
        What is the difference between
        offsetHeight and clientHeight?
    
      
    
        h1 {
            color:green;
        }
        #GFG {
            height: 200px;
            width: 300px;
            padding: 20px;
            margin: 20px;
            border: 10px solid black;
            overflow-x:scroll;
            overflow-y:scroll;
            text-align:justify;
        }
        #geeks {
            font-weight:bold;
            color:green;
        }
    

  

    
        GeeksforGeeks
          
        OffsetHeight and ClientHeight
      
        
            Click Here!
        
      
        
            This course is focused on Data Structures
            & Algorithms and will help you to prepare
            for product-based companies like Microsoft,
            Amazon, Adobe, etc. This is an online
            learning program which can be completed
            according to your pace. The course
            curriculum has been divided into 10 weeks
            where you can practice the question & 
            attempt the Contest according to your 
            time convenience. The course content includes
            pre-recorded premium Video lectures & 
            programming questions for practice. You will 
            learn algorithmic techniques for solving 
            various computational problems and will
            implement more than 200 algorithmic coding
            problems. 
        
          
        
          
      
        
            function myGeeks() {
                  
                var element = document.getElementById("GFG");
                var text = "";
                  
                text += "ClientHeight: " + element.clientHeight
                            + "px" + "<br>";
                  
                text += "OffsetHeight: " + element.offsetHeight
                            + "px" + "<br><br>";
                  
                text += "ClientWidth: " + element.clientWidth
                            + "px" + "<br>";
                  
                text += "OffsetWidth: " + element.offsetWidth + "px";
                  
                document.getElementById("geeks").innerHTML = text;
            }
        
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：