How to tell if an element has a fluid width [duplicate]

Question

Possible Duplicate:
Determine whether element has fixed or percentage width using JavaScript

I need to know if an element has a fluid width or not. I can go into the hairy details of why if it's really needed, but I dont think it is.

Basically, is the element N% width or Npx|pt|em|etc width? Right now I only see ways to get the current computed width. So, even if an element is 100% wide, getting the value in JS returns, like, 500px or however wide it is at that moment.

Are there any hacks or JS API's I dont know about to know this or to get the original CSS value?

Also, please no jQuery. This is for a JS library of mine.

Answer 1

You need to use window.getComputedStyle for those browsers that support it, and element.currentStyle for those that support that. Or you could use jQuery $(element).css('width') which should abstract the difference (although I haven't tested the latter).

It seems the following does not do what I had thought it would, at least not for width and height. After searching around I found this other SO question where it is stated to be impossible (at least not without parsing the Stylesheet?!). Seems mad to me, I shall keep looking just in case.

get CSS rule's percentage value in jQuery

if( window.getComputedStyle ) {
  value = window.getComputedStyle(element,null).width;
} else if( element.currentStyle ) {
  value = element.currentStyle.width;
}

update

I've found that this works...! but only for firefox :( To me it would make sense that if the element has nothing to compute it's width against (i.e. it's not part of the document flow) it should return it's original value:

function isElementFluid(elm){
  var clone = elm.cloneNode(false);
  if( window.getComputedStyle ) {
    value = window.getComputedStyle(clone,null).width;
  } else if( clone.currentStyle ) {
    value = clone.currentStyle.width;
  }
  return (value && String(value).indexOf('%') != -1 );
}

(have not tested for IE)

Yet again another instance of where I agree with FireFox's implementation and frown at Chrome or Safari.

update 2

Ok, not a fan of being defeated by computers ;) so have come up with this function -- totally over the top, but it does seem to work. Again I have yet to test this on IE as I don't have a Windows machine to hand at the moment. It's annoying when the original FF only version is quite succinct, but the logic here is sound - it falls back to what a normal human would do in testing if something is stretchy.

function isElementFluid(elm){
  var wrapper, clone = elm.cloneNode(false), ow, p1, p2;
  if( window.getComputedStyle ) {
    value = window.getComputedStyle(clone,null).width;
  } else if( clone.currentStyle ) {
    value = clone.currentStyle.width;
  }
  /// the browsers that fail to work as Firefox does
  /// return an empty width value, so here we fall back.
  if ( !value ) {
    /// remove styles that can get in the way
    clone.style.margin = '0';
    clone.style.padding = '0';
    clone.style.maxWidth = 'none';
    clone.style.minWidth = 'none';
    /// create a wrapper that we can control, my reason for
    /// using an unknown element is that it stands less chance
    /// of being affected by stylesheets - this could be improved
    /// to avoid possible erroneous results by overriding more css
    /// attributes with inline styles.
    wrapper = document.createElement('wrapper');
    wrapper.style.display = 'block';
    wrapper.style.width = '500px';
    wrapper.style.padding = '0';
    wrapper.style.margin = '0';
    wrapper.appendChild(clone);
    /// insert the element in the same location as our target
    elm.parentNode.insertBefore(wrapper,elm);
    /// store the clone's calculated width
    ow = clone.offsetWidth;
    /// change the wrapper size once more
    wrapper.style.width = '600px';
    /// if the new width is the same as before, most likely a fixed width
    if( clone.offsetWidth == ow ){
      /// tidy up
      elm.parentNode.removeChild(wrapper);
      return false;
    }
    /// otherwise, calculate the percentages each time - if they
    /// match then it's likely this is a fluid element
    else {
      p1 = Math.floor(100/500*ow);
      p2 = Math.floor(100/600*clone.offsetWidth);
      /// tidy up
      elm.parentNode.removeChild(wrapper);
      return (p1 == p2) ? Math.round(p1)+'%' : false;
    }
  }
  else {
    p1 = (value && String(value).indexOf('%') != -1);
    return p1 ? value : false;
  }
}

Answer 2

You can retrieve the CSS value with:

element.style.width

which will return:

auto - The browser sets the width. This is default
length - Defines the width in length units
% - Defines the width in % of the parent element
inherit - The value of the width property is inherited from parent element

Return values pasted from: http://www.w3schools.com/jsref/prop_style_width.asp