0

I am having an issue with currentStyle which I have read is the fix before IE9 for getComputedStyle support.

I recently made this other thread regarding getting a reference to the top level LI list of a multi level navigation menu:

Selecting <li> child node but not grandchildren with vanilla JavaScript

Now I need to be able to measure the width or height of the LI's I am not able to reference with the help I received. It works, but not below IE9.

Here is what I've tried for getting the width:

this.w =function( elm ){ 

var s = (window.getComputedStyle) ? window.getComputedStyle(elm, "") : elm.currentStyle;

return parseInt(s.width);

}

the width comes back as NaN

SCRIPT5007: Unable to get property 'innerHTML' of undefined or null reference

I really appreciate everyone's help

Community
  • 1
  • 1
RON2015
  • 443
  • 3
  • 16
  • I didn't notice you had `.width` on `s`. Log the value of `s.width` to see what you get. –  Apr 05 '15 at 22:59
  • yeah it comes back as NaN – RON2015 Apr 05 '15 at 23:06
  • Ok....I see now... at first the LI doesn't have a width... the width is dynamic, I tried setting a width and its no longer NAN, it gets the width that I set, but this is not what I'm aiming for.. the font size changes in my script, and I need to be able to measure the new width each time (and I will need height too). Is it possible in IE8 ? – RON2015 Apr 05 '15 at 23:13
  • The width is auto and depends on the text and the padding – RON2015 Apr 05 '15 at 23:23

1 Answers1

0

elm.currentStyle.width returns "auto" when no width has been specified.

This correctly reflects the current style setting, but doesn't give you the value that you are looking for (as you might have expected getComputedStyle to do).

Instead, use elm.clientWidth

So in your example, you might use...

this.w =function( elm ){
    var s = (window.getComputedStyle) ? window.getComputedStyle(elm, "") : elm.clientWidth;
    return parseInt(s.width);
}

(tested in IE8 but not IE7)

seebigs
  • 869
  • 8
  • 9