获取元素的内部高度

Question

如何在没有填充和边框的情况下获得元素的内部高度？

没有 jQuery，只有纯 JS，以及跨浏览器的解决方案（包括 IE7）

Answer 1

var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");

上述版本将在现代浏览器中运行。 请检查 IE 浏览器的currentStyle 。

Answer 2

clientHeight - 给出包括填充但没有边框的高度。

getComputedStyle - 一种利用元素的 CSS 规则并检索属性值（填充）的方法

使用parseInt是一种去除单位并仅保留数值（以像素为单位）的方法
parseFloat也可用于更精确的亚像素测量

请注意，所有值都将由 DOM API 自动转换为像素

function getInnerHeight( elm ){
  var computed = getComputedStyle(elm),
      padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);

  return elm.clientHeight - padding
}

演示：

 // main method function getInnerHeight( elm ){ var computed = getComputedStyle(elm), padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom); return elm.clientHeight - padding } // demo utility function function printInnerHeight( selector ){ console.clear() console.log( getInnerHeight( document.querySelector(selector) ) ) }

 body{ display: flex; padding:0; margin: 0; } div{ flex: 1; }.demo1{ padding-top: 2vh; padding-bottom: 1vh; margin: 30px; border: 10px solid salmon; box-sizing: border-box; outline: 1px solid red; }.demo2{ padding-top: 2vh; padding-bottom: 4vh; margin: 30px; border: 10px solid salmon; border-bottom-width: 0; height: 150px; outline: 1px solid red; } p::before{ content: ''; display: block; height: 100%; min-height: 50px; background: lightgreen; }

 <div> <h2>inner height should be ~50px</h2> <button onclick="printInnerHeight('.demo1')">Get Inner Height</button> <p class='demo1'></p> </div> <div> <h2>inner height should be ~150px</h2> <button onclick="printInnerHeight('.demo2')">Get Inner Height</button> <p class='demo2'></p> </div>

Answer 3

从评论中编辑：

http://jsfiddle.net/hTGCE/1/ （比预期多一点代码）

在互联网上，您可以找到这样的功能：

  function getRectangle(obj) {

          var r = { top: 0, left: 0, width: 0, height: 0 };

          if(!obj)
             return r;

          else if(typeof obj == "string")
             obj = document.getElementById(obj);


          if(typeof obj != "object")
             return r;

          if(typeof obj.offsetTop != "undefined") {

             r.height = parseInt(obj.offsetHeight);
             r.width  = parseInt(obj.offsetWidth);
             r.left = r.top = 0;

             while(obj && obj.tagName != "BODY") {

                r.top  += parseInt(obj.offsetTop);
                r.left += parseInt(obj.offsetLeft);

                obj = obj.offsetParent;
             }
          }
          return r;
       }

如果你想减去 padding / border-width 是在 css 文件中设置的，而不是在样式属性中动态设置的：

    var elem = document.getElementById(id);
    var borderWidth = 0;

          try {
             borderWidth = getComputedStyle(elem).getPropertyValue('border-top-width');

             } catch(e) {

             borderWidth = elem.currentStyle.borderWidth;
          } 
    borderWidth = parseInt(borderWidth.replace("px", ""), 10);

和填充相同。 然后你计算它。

Answer 4

您可以简单地使用clientHeight和clientWidth属性。

Element.clientHeight — clientWidth 的 MDN 网络文档以完全相同的方式工作。

Answer 5

我遇到了同样的问题，发现没有原生的跨平台解决方案，但解决方案很简单

var actual_h = element.offsetHeight;

            if(parseInt(element.style.paddingTop.replace('px','')) > 0){
                actual_h=actual_h -  parseInt(element.style.paddingTop.replace('px',''));

            }
            if(parseInt(element.style.paddingBottom.replace('px','')) > 0){
                actual_h=actual_h -  parseInt(element.style.paddingBottom.replace('px',''));

            }