controlling css with javascript works with Mozilla & Chrome however not with IE

Question

Im having problems with this function applying css(using a text variable) working with Internet Explorer but it works in Firefox & Chrome.

the code:

Answer 1

I know this is a old thread but i was looking for a solution to insert CSS styles dynamicly that works with all common/major browsers. I want to share my solution with you. The solution of david doesn't work well (sorry). I have made a tooltip javascript/jQuery class that can work with inline styles for example but can also work with CSS styled styles. (offtopic: Also the class can auto align tooltips like the default tooltips).

Maybe you wonder what the benefits are when you insert CSS like the example above. Well, you don't need an extra CSS file with the styles and you can dynamicly add styles from script and when you working with images you can dynamicly change the path to the images if you want (so you don't need to change any file). Also you can insert the styles ABOVE other stylesheets/style rules and the aplied style rules can be modified in the other stylesheets below (this is not possible when you use inline styles or when placing the inserted rules BELOW any existing stylesheet).

This function works with Opera/Firefox/IE7/IE8/IE9/Chrome/Safari (without any hack applied!):

    function addHtmlStyles( sCss, oBefore ) 
    {
     var oHead = document.getElementsByTagName('head')[0];
     if( !oHead || oHead == null ) 
      { return false; }

     var bResult = false,
         oStyle = document.createElement('style');
     oStyle.type = 'text/css';
     oStyle.rel = 'stylesheet';
     oStyle.media = 'screen';

     if( typeof oStyle.styleSheet == 'object' ) 
      {  // IE route (and opera)
        try{ oStyle.styleSheet.cssText = sCss; bResult = true; }
        catch(e) {}  
      }
     else { 
             // Mozilla route
            try{ oStyle.innerHTML = sCss; bResult = true; }
            catch(e) {};
            if( !bResult )
            {
               // Webkit route
              try{ oStyle.innerText = sCss; bResult = true; }
              catch(e) {};
            }
          }

     if( bResult )
     {
      try 
      {
      if( typeof oBefore == 'object' )
       { oHead.insertBefore(oStyle, oBefore ); }
      else { oHead.appendChild(oStyle); }
      }
      catch(e) { bResult = false; }
     }

 return bResult;
}

It returns true when ok or false when fail. For example:

var sCss = '#tooltip {background:"#FF0000";}';

// get first stylesheet with jQuery, we don't use $('head') because it not always working
// If there is no stylesheet available, it will be added at the end of the head tag.
var oHead = $(document.getElementsByTagName('head')[0]),
    oFirst = oHead.find('[rel=stylesheet]').get(0);

if( addHtmlStyles( sCss, oFirst ))
 { alert( 'OK' ); }
else { alert( 'NOT OK' ); }

That's all. Hope you like the solution. Greetz, Erwin Haantjes