0

I am working on a small javascript script to edit CSS code and I found out there are many ... particularities, if I may say so, with internet explorer in comparison to other browsers. For instance the rules object of the document.stylesheet object is called cssRule for most browsers and rule for IE.

What I would like to do here is assign the reference of a property of an object containing the size of the window (window.innerWidth & document.body.clientWidth) in order to avoid checking each time if IE object names should be used or the "normal" one.

Is it a good/bad idea?

Before posting the question I thought some more about it and came up with a solution..

function CommonObject(obj, propertyName){
    this.get = function() { return obj[propertyName]; }
}

Is there another/better way to do this?

Thanks

(Yeah I know doing this is really not necessary, especially since I'm making a small script and performance isn't really a concern but I'm mostly being curious.)

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
Guillaume Drolet
  • 23
  • 1
  • 4
  • 2
    I think most people would suggest [insert name of favorite cross-platform JavaScript framework here] :-) –  Nov 22 '11 at 06:22
  • You might want to check the "Let's make a framework" series over at "dailyjs.com" — Alex has written a few parts on CSS manipulation as well: http://dailyjs.com/2011/03/17/framework-54/, http://dailyjs.com/2011/04/21/framework-59/, http://dailyjs.com/tags.html#css, http://dailyjs.com/tags.html#lmaf – polarblau Nov 22 '11 at 06:58

1 Answers1

0

Use a mapping table:

var css = {"rules": {"ie":"rule","w3":"cssRule"} }

var browser = !!window.XPathEvaluator ? "w3" : "ie"

var foo = document.styleSheets["0"][css.rules[browser] ]
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265