如何获取元素的渲染高度？

要获取元素的高度，JavaScript 中有五种常用方法。让我们看看它们之间的区别以及何时应该使用它们。只有最后一种方法给出了正确的渲染高度而不是布局高度。

• 样式.高度
• jQuery( 高度、内部高度、外部高度)
• 客户端高度、偏移高度、滚动高度
• 获取计算样式
• getBoundingClientRect().height

渲染高度是在元素上应用所有样式和转换后元素最终获得的高度。例如，一个元素的高度为 100px，然后得到一个transform:scale(0.5) 。其渲染高度为 50px(转换后)，布局高度为 100px。

style.height我们可以在任何选定的元素上使用style.height ，它会返回它的高度。不包括内边距、边框或边距。 Italways 与特定单位一起返回高度。

注意：仅当我们使用 HTML 中的style属性将高度显式设置为内联时才有效。

句法：

let height = document.getElementById("someId").style.height;

例子：

HTML

  

    
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        #div1 {
            height: 100px;
        }
    

  

    
        
            style.height without 
            inline style
        
    
      
    
        style.height with inline style
    
    
        Get Height
    
  
    
        function alertHeight() {
            alert(document.getElementById
                ("div1").style.height);
  
            alert(document.getElementById
                ("div2").style.height);
        }
    

  

输出：
它为“div1”返回空字符串，为“div2”返回“100px”

• 对于“div1”：
• 对于“div2”：

结论：它只返回内联样式属性中指定的任何高度。它不考虑任何转换，例如比例。它不可靠，不应使用，因为内联样式并不理想。

jQuery(高度，内部高度，外部高度)
height()返回元素的当前高度。它不包括内边距、边框或边距。它总是返回一个无单位的像素值。

注意： height()将始终返回内容高度，无论 CSS box-sizing属性的值如何。

句法：

let height = $("#div1").height();

示例 2：

HTML

  

    
      
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        #div1 {
            height: 100px;
        }
    
  
    
    

  

    
        $(".class").height
    
    
        Get Height
    
  
    
        function alertHeight() {
            alert($("#div1").height());
        }
    

  

输出：
它将无单位像素值返回为 100。

输出：

innerHeight()它返回元素的当前高度，包括顶部和底部填充但不包括边框。它总是返回一个无单位的像素值。

句法：

let height = $("#div1").innerHeight();

示例 3：

HTML

  

    
  
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        #div1 {
            height: 100px;
            padding: 10px;
            margin: 5px;
        }
    
  
    
    

  

    
        $(".class").innerHeight
    
    
        Get Height
    
  
    
        function alertHeight() {
            alert($("#div1").innerHeight());
        }
    

  

输出：
它返回 120，即 (10(top padding) + 100(content height) + 10(bottom-padding))

externalHeight()它返回元素的当前高度，包括padding 、 border和margin可选。它总是返回一个无单位的像素值。

句法：

let height = $("#div1").outerHeight(); 
let height = $("#div1").outerHeight();

示例 4：

HTML

  

    
  
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        #div1 {
            height: 100px;
            padding: 10px;
            margin: 5px;
        }
    
      
    
    

  

    
        $(".class").outerHeight
    
      
    
        Get Height
    
  
    
        function alertHeight() {
            alert($("#div1").outerHeight());
        }
    

  

输出：

(1(上边框)+ 10(上边距)+ 100(内容高度)+1 0(下边距)+ 1(下边距)

注意：当元素或其父元素隐藏时，不能保证height() 、 innerHeight()和outerHeight()报告的值是准确的。要获得准确的结果，请在使用这些方法之前确保元素可见。 jQuery 将尝试暂时显示然后重新隐藏元素以测量其尺寸，但这是不可靠的，并且(即使准确)会显着影响页面性能。这个显示和重新隐藏测量功能可能会在 jQuery 的未来版本中删除。

结论：

// If you need height of div excluding margin/padding/border
$('#div1').height();
// If you need height of div with padding but without border + margin
$('#div1').innerHeight();
// If you need height of div including padding and border
$('#div1').outerHeight();
// For including border + margin + padding, can use
$('#div1').outerHeight(true);

所有这些只返回布局高度，而不是渲染高度。

客户端高度、偏移高度、滚动高度
clientHeight()它从元素返回显示内容的高度(包括垂直填充但不包括边框或边距或滚动条)。它总是以像素为单位返回一个整数值。如果元素被隐藏，则返回 0。如果它是一个可滚动元素，那么它只会给出可见部分的高度。

句法：

let height = document.getElementById("div1").clientHeight;

示例 5：

HTML

  

    
  
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        #div1 {
            height: 100px;
            padding: 10px;
        }
    
      
    
    

  

    
        .clientHeight
    
    
        Get Height
    
  
    
        function alertHeight() {
            alert(document.getElementById
                ("div1").clientHeight);
        }
    

  

输出：

它返回 120，即 (10(top padding) + 100(content height) + 10(bottom-padding))

结论：如果我们想找到实际显示内容的高度，请使用 clientHeight。它返回元素当前可见部分的布局高度，即使结果是小数，该部分也会四舍五入为整数值。

offsetHeight()它返回元素占据的高度，包括垂直填充、边框和滚动条(如果有)。它不包括保证金。它总是以像素为单位返回一个整数值。如果元素被隐藏，则返回 0。

注意：不包括::after或::before等伪元素的高度

句法：

let height = document.getElementById("div1").offsetHeight;

示例 6：

HTML

  

    
  
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        #div1 {
            height: 100px;
            padding: 10px;
        }
    

  

    
        .offsetHeight
    
    
        Get Height
    
  
    
        function alertHeight() {
            alert(document.getElementById
                ("div1").offsetHeight);
        }
    

  

输出：

它返回 122，即 (1(border-top) + 10(padding-top)+ 100(contentHeight) + 10(padding-bottom) + 1(border-bottom))

结论：如果您需要知道一个元素的总高度，包括可见内容的宽度、滚动条(如果有)、内边距和边框，我们可以使用offsetWidth 。它返回元素当前可见部分的布局高度，该部分四舍五入为整数值。

scrollHeight()它返回元素整个内容的高度，即使由于滚动条而只有部分内容可见。它总是以像素为单位返回一个整数值。如果元素被隐藏，则返回 0。

它与 clientHeight 类似，因为它包括元素及其padding ，但不包括其边框、边距或水平滚动条(如果存在)。它还可以包括伪元素的高度，例如::before或::after 。如果元素的内容可以在不需要垂直滚动条的情况下适应，则其 scrollHeight 等于 clientHeight。

句法：

let height = document.getElementById("div1").scrollHeight

示例 7：

HTML

  

    
  
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        .div0 {
            height: 50px;
        }
  
        #div1 {
            height: 100px;
            padding: 10px;
            overflow: auto;
        }
    

  

    
        .offsetHeight
        As the placement season is back 
        so are we to help you ace the 
        interview.We have selected some 
        most commonly asked and must do 
        practice problems for you. You 
        can also take part in our mock 
        placement contests which will 
        help you learn different topics 
        and practice at the same time, 
        simulating the feeling of a 
        real placement test environment.
        There are many important things 
        that should be taken care of, 
        like user friendliness,modularity, 
        security, maintainability, etc. 
        Why to worry about performance?
        The answer to this is simple, we 
        can have all the above things
        only if we have performance. So 
        performance is like currency through 
        which we can buy all the above things.
        Another reason for studying performance 
        is – speed is fun! To summarize, 
        performance == scale. Imagine a text 
        editor that can load 1000 pages,
        but can spell check 1 page per minute
        OR an image editor that takes 1 hour
        to rotate your image 90 degrees left 
        OR … you get it. If a software feature 
        can not cope with the scale of tasks 
        users need to perform – it is as good 
        as dead.
    
  
    
        Get Height
    
        function alertHeight() {
            alert(document.getElementById
                ("div1").scrollHeight);
        }
    

  

输出：

(1(border-top) + 10(padding-top) + entireContent(可见和不可见) + 10(padding-bottom)+ 1(border-bottom))

结论：如果您需要知道内容的实际大小，无论当前可见的内容有多少，请使用scrollHeight 。它包括元素填充但不包括边距、边框或滚动条(如果存在)。如果高度是分数，它返回四舍五入的整数。

getComputedStyle() 方法： getComputedStyle()方法基本上允许我们检索不同属性的已解析 CSS 值。它返回一个 CSSStyleDeclaration 对象。在应用了来自多个来源的“样式”之后，计算样式用于显示元素。

getComputedStyle().height它将返回指定的布局高度而不是渲染高度。它返回小数像素值。它是一个解析值，因此如果我们使用 100%，它将返回以像素为单位的等效解析值。它只给出内容高度。如果需要，我们可以单独访问每个 CSS 属性，例如margin-top、margin-bottom、padding-top、padding-bottom、border-top、border-bottom ，并根据需要添加它们。

句法：

let height = getComputedStyle(document.getElementById("div1")).height;

或者

let height = getComputedStyle(document.getElementById("div1"))
.getPropertyValue("height");
let marginTop = getComputedStyle(document.getElementById("div1"))
.getPropertyValue("margin-top");
let borderBottom = getComputedStyle(document.getElementById("div1"))
.getPropertyValue("border-bottom");

示例 8：

HTML

  

    
  
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        #div1 {
            height: 100px;
            padding: 10px;
        }
    

  

    
        .getComputedStyle(el).height
    
    
        Get Height
  
    
        function alertHeight() {
            alert(getComputedStyle(
                document.getElementById("div1"))
                .getPropertyValue("height"));
        }
    

  

输出：

100 像素

结论：它允许完全控制选择的内容，但只返回布局尺寸。它不会导致任何转换。如果需要，我们还可以通过在getComputedStyle() 中传递第二个参数并获取其特定样式来定位伪元素。

注意： getComputedStyle()函数的不同属性在不同浏览器中支持不同。

getBoundingClientRect() 方法： getBoundingClientRect().height返回元素占据的高度，包括垂直填充、边框和滚动条(如果有)。它不包括保证金。它与offsetHeight类似，但它返回一个小数值，并且还显示渲染高度而不是布局高度。

句法：

let height = document.getElementById("div1")
.getBoundingClientRect().height;

示例 9：

HTML

  

    
    
        div {
            border: 1px solid black;
            text-align: center;
            margin-bottom: 16px;
            color: green;
        }
  
        #div1 {
            height: 100px;
            padding: 10px;
        }
    

  

    
        .getBoundingClientRect().height
    
    
        Get Height
    
  
    
        function alertHeight() {
            alert(document.getElementById("div1").
                getBoundingClientRect().height);
        }
    

  

输出：

它返回 122，即 (1(border-top) + 10(padding-top) + 100(contentHeight) + 10(padding-bottom) + 1(border-bottom))

结论：它与offsetHeight类似，但返回小数值。它还提供渲染高度而不是布局高度。如果我们应用变换比例，现在返回的值会有所不同。

如果需要最终渲染高度，请使用getBoundingCLientRect(). height。否则您可以根据需要使用除style.height之外的所有其他方法。