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

Question

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

编辑:忘了说了，我也要支持 IE 8。

Answer 1

好吧，我已经设法找到了解决方案。对于 IE<9 以外的浏览器，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');
}