How can I access style properties on javascript objects which are using external style sheets?

Question

I have an external style sheet with this in it:

.box {
padding-left:30px;
background-color: #BBFF88;
border-width: 0;
overflow: hidden;
width: 400px;
height:         


        

Answer 1

I hope this is helpful:

        function changecss(theClass,element,value) {
//Last Updated on June 23, 2009
//documentation for this script at
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
 var cssRules;

 var added = false;
 for (var S = 0; S < document.styleSheets.length; S++){

if (document.styleSheets[S]['rules']) {
  cssRules = 'rules';
 } else if (document.styleSheets[S]['cssRules']) {
  cssRules = 'cssRules';
 } else {
  //no rules found... browser unknown
 }

  for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
   if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
    if(document.styleSheets[S][cssRules][R].style[element]){
    document.styleSheets[S][cssRules][R].style[element] = value;
    added=true;
    break;
    }
   }
  }
  if(!added){
  if(document.styleSheets[S].insertRule){
          document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length);
        } else if (document.styleSheets[S].addRule) {
            document.styleSheets[S].addRule(theClass,element+': '+value+';');
        }
  }
 }
}

It is taken from here.