How to determine from Javascript if an html element has overflowing content

Question

I am interested to know if there is any way i can check from javascript code if an html element has overflow in it's content (but with the overflow property set to visible - so no scrollbars on the element). Can i check irrespective of scrollbars for overflow content (in a div tag for instance)? Thanks in advance.

Answer 1

Try comparing element.scrollHeight / element.scrollWidth to element.offsetHeight / element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

Answer 2

document.getElementById("divID").style.overflow

Answer 3

Normally, you can compare the client[Height|Width] with scroll[Height|Width] in order to detect this... but they'll be the same when overflow is visible. So a detection routine must account for this:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;
   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Tested in FF3, IE6, Chrome 0.2.149.30.