title: Fill, opacity, strokeColor and strokeWidth in IE8
body: <p>I have dynamically added a CSS class as follows:</p>
  
  <pre><code>var style = document.createElement('style');
  style.id = "highlightSegment";
  var text = ".highlightStyle { fill:" + fill + ";opacity:" + opacity + ";stroke:" + strokeColor + ";stroke-width:" + strokeWidth + "+ }";
  style.setAttribute("type", "text/css");
  if (style.styleSheet) {   // for IE
      style.styleSheet.cssText = text;
  } else {                // others
      var textnode = document.createTextNode(text);
      style.appendChild(textnode);
  }
  var h = document.getElementsByTagName('head')[0];
  h.appendChild(style);
  </code></pre>
  
  <p>in css is,</p>
  
  <pre><code>var text = ".highlightStyle { fill:" + fill + ";opacity:" + opacity + ";stroke:" + strokeColor + ";stroke-width:" + strokeWidth + "+ }";
  </code></pre>
  
  <p><code>fill</code>, <code>opacity</code>, <code>strokeColor</code> and <code>strokeWidth</code> are variable which changed dynamically. Those attributes are working fine in all browser except IE8.</p>
  
  <p>How can I resolve this problem?</p>