纯JavaScript中jQuery的.height()和.width()相当于什么？

Question

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

编辑: 忘了提,我也要支持IE 8.

Answer 1

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

这elemID是元素 ID

Answer 2

好吧,我设法找到了解决方案.对于除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在%在样式表中,它会返回%也.

所以问题仍然存在,我们需要一种从百分比转换为像素值的方法.有一个黑客从院长爱德华兹解决这个问题.谢谢他!

    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查找内容宽度(计算高度的逻辑除了查询高度而不是宽度)的跨浏览器解决方案如下:

假设我们有一个divid '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');
}