如何用 js 原生代码实现 jquery 的 outerHeight 方法？

Question

最近准备用 Zepto 代替 jquery 了，替换之后发现 outerHeight 这个方法没有，自己大概了解一下，怕写不全面，想请问一下有大神知道如何使用 js 原生代码实现不？谢谢。

Answer 1

关键点在于如何获取margin的值：

// element为dom元素
// options为true时，表示需要获取外边距
function outerHeight(element, options) {
  const offsetHeight = element.offsetHeight;

  if (options) {
    // 是否要计算外边距
    const { marginTop, marginBottom } = window.getComputedStyle(
      element,
      null
    );
    return (
      offsetHeight + parseInt(marginTop, 10) + parseInt(marginBottom, 10)
    );
  }
  return offsetHeight;
}

使用：

console.log(outerHeight(document.querySelector(".content"))); // 280
console.log(outerHeight(document.querySelector(".content"), true)); // 326

Answer 2

jQuery是开源的，去看看它是怎么实现的不就好了

Answer 3

jquery outerHeight实现源码