How to find actual rendered values of elements set to 'auto' using JavaScript

Question

Suppose I have the following html, and no CSS

<div> 
  here is some content in this div. it stretches it out
  <br />and down too!
</div>

Now I want to get the actual pixel width and height that the browser has rendered this div as.

Can that be done with JS?

Thank you.

Answer 1

Try getting a reference to your div and reading the offsetWidth and offsetHeight properties:

var myDiv = document.getElementById('myDiv');
var width = myDiv.offsetWidth; // int
var height = myDiv.offsetHeight;

offsetWidth/Height cumulatively measures the element's borders, horizontal padding, vertical scrollbar (if present, if rendered) and CSS width. It's the pixel values of the entire space that the element uses in the document. I think it's what you want.

If that is not what you meant, and you'd rather only the element's width and height (i.e. excluding padding, margin, etc) try getComputedStyle:

var comStyle = window.getComputedStyle(myDiv, null);
var width = parseInt(comStyle.getPropertyValue("width"), 10);
var height = parsetInt(comStyle.getPropertyValue("height"), 10);

The values above will be the final, computed pixel values for the width and height css style properties (including values set by a <style> element or an external stylesheet).

This won't work in IE, however.

---

You say you are using jQuery. Well it's trivial now, and works cross-browser:

var width = $('div').css('width');
var height = $('div').css('height');

With jQuery you don't need the first part of this answer, it's all taken care of for ya ;)

Answer 2

One of the benefits of using a framework, like Prototype, is that the framework authors have usually sorted out the portability issues. Even if you don't use the framework, it can still be instructive to read. In the case of Prototype, the code for reading the dimensions of an element accounts for a Safari issue and allows you to read the width of an element that is not presently dislayed.

getDimensions: function(element) {
  element = $(element);
  var display = $(element).getStyle('display');
  if (display != 'none' && display != null) // Safari bug
    return {width: element.offsetWidth, height: element.offsetHeight};

  // All *Width and *Height properties give 0 on elements with display none,
  // so enable the element temporarily
  var els = element.style;
  var originalVisibility = els.visibility;
  var originalPosition = els.position;
  var originalDisplay = els.display;
  els.visibility = 'hidden';
  els.position = 'absolute';
  els.display = 'block';
  var originalWidth = element.clientWidth;
  var originalHeight = element.clientHeight;
  els.display = originalDisplay;
  els.position = originalPosition;
  els.visibility = originalVisibility;
  return {width: originalWidth, height: originalHeight};
},

Answer 3

For the jQuery framework, .height and .width do the job.