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

javascript, jquery

Solution

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

Problem

Original source