获得元素的内在高度

Question

如何获得元素的内部高度,没有填充和边框？

没有jQuery,只有纯JS,还有跨浏览器解决方案(包括IE7)

Answer 1

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

以上版本适用于现代浏览器.请检查currentStyleIE浏览器.

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>