Will this javascript code work in all browsers even from IE7 and NS7?

Question

So far, this code works in Opera 11.64. It makes the first div a red box with green text in it, and the second div a blue box with yellow text in it.

  <div ID="square">square</div>
  <div ID="rectangle">rectangle</div>

  <script type="text/javascript">
    var i={square:{bgc:"#F00",c:"#0F0"},rectangle:{bgc:"#00F",c:"#FF0"}};
    var c={bgc:"backgroundColor",c:"color"};
    for (x in i){
      if (typeof(i[x]) == "object"){
        for (y in i[x]){
          document.getElementById(x)['style'][c[y]]=i[x][y];
        }
      }
    }
    </script>

I'm just trying to figure out how compatible this is with web browsers. Will it work with IE7 or netscape 7?

I ask because my goal is to convert fancy styles from CSS format to this new javascript code and thus minimize the code required to download to produce the same web page.

At this time, I have numerous CSS declarations such as:

#square{background:#000;color:#FFF}
#rectangle{background:#0FF;color:#000}
#somethingelse{background:#F0F;color:#000}

and the only things that change in that code are the values. The words "background", "color" are repeated which means nearly 15 wasted bytes per declaration.

I feel I'll gain data savings by packing my styles into this format:

var i={square:{bgc:"#F00",c:"#0F0"},rectangle:{bgc:"#00F",c:"#FF0"}};

So my question then is, if I switch my styles over so that javascript can generate them instead of declaring them flat-out as a CSS stylesheet, will IE7 and netscape 7 be unable to process the content? I want something that works for everyone but at the same time reduce the amount of unnecessary bytes.

Please advise. Thanks.