Member Avatar for 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.

Edited by Nick Evan because: Fixed formatting
  • 2 Contributors
  • 2 Replies
  • 241 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

Nice catch from and good follow‑up by . Both solutions read rules directly from stylesheets, which works but is fragile: rule indices change when imports or edits occur, and accessing cssRule lists can throw security errors for cross‑origin sheets. A more robust pattern is to create a hidden element with the target class and read its computed style — that returns the value the browser will actually apply, without iterating stylesheet indexes.

A simple cross‑browser approach:

function getFloatForClass(className) {
  var el = document.createElement('div');
  el.className = className;
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  el.style.visibility = 'hidden';
  document.body.appendChild(el);

  var value = '';
  if (window.getComputedStyle) {
    value = window.getComputedStyle(el, null).getPropertyValue('float');
  } else {
    var cur = el.currentStyle || {};
    value = cur.styleFloat || cur['float'] || '';
  }

  document.body.removeChild(el);
  return value;
}

Notes and troubleshooting: run this after DOM ready (document.body must exist). Do not use display:none for the probe element — it can prevent certain computed values — use off‑screen/visibility:hidden as above. Computed values reflect the cascade and are usually resolved (widths tend to be pixel values). If iterating styleSheets is still required, wrap access in try/catch to handle cross‑origin SecurityErrors and test for both vendor collections (modern cssRules vs older rules).

Modern alternative: expose the menu direction with a CSS custom property (for example --menu-float: right;) and read it via getComputedStyle(...).getPropertyValue('--menu-float'). That intentionally surfaces configuration to JS and avoids parsing stylesheet rule lists altogether. This approach keeps code simpler and more resilient than relying on stylesheet line numbers.

Recommended Answers

All 2 Replies

Member Avatar for 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.

commented: That did the trick! Thanks. +3
Member Avatar for 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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.