在纯 JavaScript 中，jQuery 的 .height() 和 .width() 等价于什么？

Question

是否有任何等效的跨浏览器 API 用于获取不包括边框大小、填充和边距的内容高度和宽度？我没有使用 jQuery 的选项。

编辑： 忘了说，我也必须支持 IE 8。

原文由 Md. Arafat Al Mahmud 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，我设法找到了解决方案。对于 IE 以外的浏览器， Window.getComputedStyle() 可以解决问题。 Window.getComputedStyle() 方法在应用活动样式表并解析这些值可能包含的任何基本计算后给出元素的所有 CSS 属性的值。 有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle 。

问题出在 IE 8 及更早版本上。 getComputedStyle 是 undefined 在其中。幸运的是，IE 具有专有的 currentStyle 属性，我们可以从中检索内容 width 和 height 。可悲但真实的是，如果我们在样式表中的 % 中声明 width ，它也会在 % 中返回。

所以问题仍然是，我们需要一种方法将百分比值转换为像素值。 Dean Edwards 有一个 hack 可以解决这个问题。感谢他！

     var PIXEL = /^\d+(px)?$/i;
    function getPixelValue(element, value) {
        if (PIXEL.test(value)) return parseInt(value);
        var style = element.style.left;
        var runtimeStyle = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft;
        element.style.left = style;
        element.runtimeStyle.left = runtimeStyle;
        return value;
    };

因此，最终使用 hack 查找内容宽度的跨浏览器解决方案（计算高度的逻辑相同，除了查询高度而不是宽度）如下：

假设我们有一个 div id 'container' 。它的宽度在样式表中设置为 50%。

  <style type="text/css">

    #container {
        width: 50%;
        padding: 5px;
    }

  </style>

测试 JavaScript 代码：

 var container = document.getElementById('container');
if (window.getComputedStyle) {
      var computedStyle = getComputedStyle(container, null)
      alert("width : "+computedStyle.width);
} else {
      alert("width : "+getPixelValue(container,container.currentStyle.width)+'px');
}

原文由 Md. Arafat Al Mahmud 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

   document.getElementById("elemID").clientWidth;
   document.getElementById("elemID").clientHeight;

这里 elemID 是元素ID

原文由 void 发布，翻译遵循 CC BY-SA 3.0 许可协议