What is the equivalent of .height() and .width() of jQuery in pure JavaScript?

Question

Is there any equivalent cross browser API for getting the content height and width which don't include border size, padding and margin ? I don't have the option of using jQuery.

Edit: Forgot to mention, I have to support IE 8 too.

Answer 1

Well, I have managed to come to a solution. For browsers except IE<9, Window.getComputedStyle() is to the rescue. The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain. See https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle for more details on that.

Problem is with IE 8 and earlier. getComputedStyle is undefined in them. Fortunately IE has proprietary currentStyle property from which we could retrieve content width and height. Sad but true that, if we declared width in % in stylesheets, it would return in % also.

So the problem remains is, we need a way to convert from percentage to pixel values. There is a hack from Dean Edwards for solving this problem. Thanks to him !

    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;
    };

So, finally the cross-browser solution of finding content width( logic for calculating height is same except query for height instead of width ) using the hack is as follows:

Suppose we have a div with id 'container'. Its width is set as 50% in the style sheet.

 <style type="text/css">

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

  </style>

Test JavaScript Code:

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');
}

Answer 2

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

Here elemID is the element ID