How to tell if an element has a fluid width

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.

can't think of anything offhand right now, but you could trundle through the `styles` object and pick out the rules that apply to the object and see if they're specified with a relative unit or not. — Marc B, Oct 14 '12 at 08:47
@MarcB - I don't think that works: http://jsbin.com/erenuw/1/edit — Oscar Godson, Oct 14 '12 at 08:58
I've just updated with a function that works in everything I've tested so far - it's a bit mad, but it does the job :) needs testing in IE though. — Pebbl, Oct 14 '12 at 10:10

score 2 · Answer 1 · edited May 23 '17 at 12:03

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

http://jsbin.com/uquzin/1/edit - That just gives me the current px width of the element. In fact, it looks like `%` never even shows up even when it's specifically set to a `%` value. — Oscar Godson, Oct 14 '12 at 09:13
@OscarGodson - good point, I haven't had to use this in a while, it always used to get the source values - however I don't think I ever tried it with width and height. :/ it seems mad that there isn't a way - I shall carry on looking. — Pebbl, Oct 14 '12 at 09:20
Thanks! Yeah, does seem strange you can't ask for the original value :) — Oscar Godson, Oct 14 '12 at 09:28

score 1 · Answer 2 · answered Oct 14 '12 at 08:53

1

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

answered Oct 14 '12 at 08:53

bromide

11
2

I don't think that works. http://jsbin.com/erenuw/1/edit – Oscar Godson Oct 14 '12 at 08:57
It would work if the styles are defined inline. – Wolfgang Stengel Oct 14 '12 at 09:08
@WolfgangStengel yes - but asking my users to put all their styles for my editor inline is ugly. I'd rather just tell them fluid width isn't supported then require them to style it inline :\ – Oscar Godson Oct 14 '12 at 09:10
Ah, I hadn't realised that only works for inline styles - thanks. – bromide Oct 14 '12 at 09:14

score 0 · Answer 3 · answered Oct 14 '12 at 09:08

0

i think what your looking for is

getComputedStyle

it isn't supported in IE8 and below, but u can emulate it IE see: http://snipplr.com/view/13523/

answered Oct 14 '12 at 09:08

Rene Koch

1,252
10
24

http://jsbin.com/uquzin/1/edit - that just gives me the current px width of the element. It wont give me % even if thats the width that was given. – Oscar Godson Oct 14 '12 at 09:14

How to tell if an element has a fluid width

3 Answers3

update

update 2

Linked