Pass predefined CSS Style to getElementsbyName?

179 Views Asked by At

This is probably a really easy question but I used google and the search function without digging up anything that worked for me.

I'm using a script that changes the font of a <div> using the getElementsByName() function on mouseover and change again when you pull the mouse away, this works as intended but I've rewrote some code of this little project and now the font used is dependent on the OS (see css styling) - which means I can't pass back "static" text properties.

Basically I need the else junction of the script to apply the CSS styling of class="japanese large pos" or its previous state if that is cleaner/more efficient, I left out the CSS below since it's not really relevant. Fiddle Demo here (including CSS): http://jsfiddle.net/ua5VS/

Thank you for the help!

This is the script:

function toggleFont()
{
  var _font = document.getElementsByName('target')[0].style.fontFamily;
  if(_font != 'KanjiStrokeOrders') {
    document.getElementsByName('target')[0].style.fontFamily = 'KanjiStrokeOrders';
    document.getElementsByName('target')[0].style.fontSize = '112px';
  }
  else {
    document.getElementsByName('target')[0].style.fontFamily = 'MS Mincho';
    document.getElementsByName('target')[0].style.fontSize = '150px';
  }
}

HTML

 <div class="back">
  <span class="japanese large pos" name="target">
   <a onmouseover="toggleFont();" onmouseout="toggleFont();">Modified text</a>
  </span>
 </div>
0

There are 0 best solutions below