javascript - Dynamically adding and updating style block -

currently doing this:

function newfont(newsizea, newsizeb) {      var elem =  document.getelementbyid('style-1');      if (typeof(elem) != 'undefined' && elem != null) {         removechildnodes(elem); // function removes child          nodesremovenode(elem);     }      var styletext = ".a { font-size:" + newsizea + "px; } .b { font-size:" + newsizeb + "px; }";     var x = document.createelement('style');      x.setattribute("type", "text/css");     x.setattribute("id", "style-1");      if (x.stylesheet) { // ie         x.stylesheet.csstext = styletext;     }      else { // others         var textnode = document.createtextnode(styletext);         x.appendchild(textnode);     } } 

the point of there loop happening , function measuring size of menu make sure fits in spot when changing font size.

i wondering, there better way create , manipulate elements? need change padding , font size right can see i'm removing entirely , recreating it.

i think easiest way prepare several css-styles different font-sizes , attach them so:

function newfont(targetelement, fontsize) {     document.getelementbyid(targetelement).classname = fontsize; }   newfont('myelement','bigfont'); 

the css-style be:

.bigfont {     font-size: 5em; } 

if want add style do:

 document.getelementbyid("myelement").classname += "myclass"; 

if want remove styles or check if style apllied please refer perfect answer: change element's class javascript