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

January 20, 2006 6:41 AM

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

posted by ph00dz to computers & internet (5 answers total)

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.
posted by weston at 7:53 AM on January 20, 2006

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 

posted by ph00dz at 8:23 AM on January 20, 2006

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]);
}
posted by mordecaibrown at 11:07 AM on January 20, 2006

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...
posted by ph00dz at 11:48 AM on January 20, 2006

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.
posted by ph00dz at 5:25 PM on January 21, 2006