📜  如何获取元素的渲染高度?

📅  最后修改于: 2021-10-29 06:38:00             🧑  作者: Mango

要获取元素的高度,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


  

    
    

  

    
        

            style.height without              inline style         

    
           
        

style.height with inline style

    
               


HTML


  

    
      
    
  
    

  

    
        

$(".class").height

    
               


HTML


  

    
  
    
  
    

  

    
        

$(".class").innerHeight

    
               


HTML


  

    
  
    
      
    

  

    
        

$(".class").outerHeight

    
                      


HTML


  

    
  
    
      
    

  

    
        

.clientHeight

    
               


HTML


  

    
  
    

  

    
        

.offsetHeight

    
               


HTML


  

    
  
    

  

    
        

.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.     
               


HTML


  

    
  
    

  

    
        

.getComputedStyle(el).height

    
               


HTML


  

    
    

  

    
        

.getBoundingClientRect().height

    
               


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

  • 对于“div1”:
  • 对于“div2”:

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

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

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

句法:

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

示例 2:

HTML



  

    
      
    
  
    

  

    
        

$(".class").height

    
               

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

输出:

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

句法:

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

示例 3:

HTML



  

    
  
    
  
    

  

    
        

$(".class").innerHeight

    
               

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

externalHeight()它返回元素的当前高度,包括paddingbordermargin可选。它总是返回一个无单位的像素值。

句法:

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

示例 4:

HTML



  

    
  
    
      
    

  

    
        

$(".class").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



  

    
  
    
      
    

  

    
        

.clientHeight

    
               

输出:

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

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

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

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

句法:

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

示例 6:

HTML



  

    
  
    

  

    
        

.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



  

    
  
    

  

    
        

.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.     
               

输出:

(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



  

    
  
    

  

    
        

.getComputedStyle(el).height

    
               

输出:

100 像素

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

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

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

句法:

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

示例 9:

HTML



  

    
    

  

    
        

.getBoundingClientRect().height

    
               

输出:

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

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

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