Comments on: IE... you are my enemy! (At least when it comes to CSS/Javascript)

Question: IE... you are my enemy! (At least when it comes to CSS/Javascript)

ph00dz — Fri, 20 Jan 2006 06:41:47 -0800

How the heck do I iterate through all a given div's style sheet in IE? This code works fine in mozilla, but IE can't get a grip on the style.length to start the loop...

var ix = document.getElementById('playground').childNodes[i].style.length;
while(ix--)
{
styleElement = document.getElementById('playground').childNodes[i].style[ix];
styleAttribute = document.getElementById('playground').childNodes[i].style.getPropertyValue(styleElement);
logMessage('attribute: ' + styleElement + ' value: ' + styleAttribute );
}

By: weston

weston — Fri, 20 Jan 2006 07:53:27 -0800

Hmmm. Accessing the style property as an array. I guess it's possible, given that objects in javascript are also hashes, but I'm not sure about being able to iterate over them via numeric keys.

This really works for you in Moz? Poking at this quickly in the Javascript shell, I find that this:

output = document.getElementById('output')
output.style[5]

Doesn't get me anything, even though there is indeed a div id'd output on the page.

There's also the issue that the style object may only give you back inline styles already set on the element/object, not the computed style.

By: ph00dz

ph00dz — Fri, 20 Jan 2006 08:23:19 -0800





cssTextArray = document.getElementById('playground').childNodes[i].style.cssText.split(";");

ix = cssTextArray.length;

while(ix--)

  {

  cssTextElementsArray = cssTextArray[ix].split(":");

  styleElement = trim(cssTextElementsArray[0]).toLowerCase();

  styleValue = trim(cssTextElementsArray[1]);

  logMessage('element: ' + styleElement + ' value: ' + styleValue);

  } // end while

  

// trim code from http://www.apriori-it.co.uk/Trim.asp

function trim(trimValue)

  {

  if(trimValue.length < 1)br>
    {

    return "";

    }

  trimValue = RTrim(trimValue);

  trimValue = LTrim(trimValue);

  if(trimValue == "")

    {

    return "";

    }

  else

    {

    return trimValue;

    }

  } // end function

    

function RTrim(VALUE)

  {

  var w_space = String.fromCharCode(32);

  var v_length = VALUE.length;

  var strTemp = "";

  if(v_length < 0)br>
    {

    return "";

    }

  var iTemp = v_length -1;

  

  while(iTemp > -1)

    {

    if(VALUE.charAt(iTemp) == w_space)

      {

      }

    else

      {

      strTemp = VALUE.substring(0,iTemp +1);

      break;

      }

    iTemp = iTemp-1;

    } //End While

  return strTemp;

  } //End Function



function LTrim(VALUE)

  {

  var w_space = String.fromCharCode(32);

  if(v_length < 1)br>
    {

    return "";

    }

  var v_length = VALUE.length;

  var strTemp = "";



  var iTemp = 0;



  while(iTemp < v_length)br>
    {

    if(VALUE.charAt(iTemp) == w_space)

      {

      }

    else

      {

      strTemp = VALUE.substring(iTemp,v_length);

      break;

      }

    iTemp = iTemp + 1;

    } //End While

  return strTemp;

} //End Function

By: mordecaibrown

mordecaibrown — Fri, 20 Jan 2006 11:07:03 -0800

This should get you started. It iterates through all of the properties of the style. Be warned that not all properties of style are CSS properties (length being 1 example). I have additional example code regarding dynamically setting CSS styles from a project I am working on right now. Send me an email if you are interested.

var cssStyles = document.getElementById('playground').childNodes[i].style;
for (property in cssStyles )
{
logMessage(property + ' = ' + cssStyles[property]);
}

By: ph00dz

ph00dz — Fri, 20 Jan 2006 11:48:49 -0800

Thanks mordecaibrown... it's weird how different the results are in IE vs. Mozilla, isn't it?

I think I've got a pretty good grip on how to get/set specific values -- I just wanted to see if there was an easy way to read out all that data at once...

By: ph00dz

ph00dz — Sat, 21 Jan 2006 17:25:37 -0800

by the way... I think I forgot to explain it, but the code I posted above is how I got around the problem.

If you need something that can read back the exact set of css values you've set for a div in both IE and Firefox, that'll work. However, the values aren't perfect, as weston pointed out. Even 'z-index' is all crazy... you'll see, if you dig into it more.