How do you grab a value from a stylesheet?

[FC Jamison]

OK...here's the background:

I want to use javascript to write a CSS dropdown menu. Since I want to be able to float the menu to either the left or the right depending on the site I am using it on, I need to grab the float value (either right or left) from a stylesheet.

I know I can simply add a variable to the script and be done, but now I just want to see if this can be done. This would be a very useful function for other javascript programs as well.

The only pain in my behind is Internet Explorer. In Netscape, Opera, and Firefox, I can simply use

document.styleSheets[i].cssRules[j].style.getPropertyValue('float');

Is there an Internet Explorer equivalent for this? I have spent two days googling for this with no glory.

So far in internet explorer, I can get as far as retrieving the selector...but I just can't figure out how to get a specific property from it to use in a conditional statement. i.e.

if (property == 'right) { do this; }
else { do that; }

To get the selector in IE, I use this:

document.styleSheets[i].rules[j].selectorText;

I just need that final snippet!

Thanks.

[Sailor_Jerry]

This would work in ie.

document.styleSheets[i].rules[i].style.styleFloat

rules being the line number were the actually style in question needs to be updated. rules will give you the selector text of you class name. (i.e ".test")

This should work, but would break if you update any line before the line in question on your stylesheet, or if you change the order of your stylesheet imports.

[FC Jamison]

Ha!

I had tried document.styleSheets[i].rules[i].style.float but not your solution.

It works as you said, and now I can move forward. Thanks!

I had already written the code to solve the problem of updating the stylesheets, I just couldn't grab the value in IE.

The completed function is as follows:

function getStyle() {
	
  if(navigator.appVersion.indexOf("MSIE")!=-1){ var ie = true; }
 
  var sheets = document.styleSheets;
	
  for(var i = 0; i < sheets.length; i++) {
			
    if (ie) { var rules = sheets[i].rules; }
    else { var rules = sheets[i].cssRules; }
 			
    for (var j = 0; j < rules.length; j++) {
      if (ie) {
        var selector = document.styleSheets[i].rules[j].selectorText;
        if (selector == ".topMenuLink") { alert(document.styleSheets[i].rules[j].style.styleFloat); }
      }
				
      else {
        var selector = document.styleSheets[i].cssRules[j].selectorText;
        if (selector == ".topMenuLink") { alert(document.styleSheets[2].cssRules[8].style.getPropertyValue('float')); }
      }
    }
  }
}

Too bad there is not a way to grab any property in IE. document.styleSheets[i].rules[j].style.styleFloat works for float, but you have to use document.styleSheets[i].rules[j].style.width to grab widths.

The more I dig in to this, the less I like IE...LOL!

Thanks again!