SGMLXML.net A place for SGML and XML application developers.

December 20, 2005

Toggle colors on html span element using Javascript

Filed under: CSS,DOM,XSLT — cangione @ 11:31 pm

Javascript for changeing the color of span elements with a particular class attribute.

<tt>&lt;<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/javascript"</span>&gt;</tt><br />
  <tt>function changecolor() {</tt><br />
  <tt>    for (i=0;i&lt;document.getElementsByTagName("span").length;
i++) {</tt><br />
  <tt>        if
(document.getElementsByTagName("span").item(i).className == "myclass"){</tt><br />
  <tt>           
document.getElementsByTagName("span").item(i).style.color = "green";</tt><br />
  <tt>        }</tt><br />
  <tt>    }</tt><br />
  <tt>}</tt><br />
  <tt>&lt;/<span class="end-tag">script</span>&gt;</tt><br />
  <br />
  <tt>.......</tt><br />
  <br />
  <tt>&lt;<span class="start-tag">a</span><span class="attribute-name">
href</span>=<span class="attribute-value">"#" </span><span class="attribute-name">onclick</span>=<span class="attribute-value">"changecolor();"</span>&gt;Change
Color&lt;/<span class="end-tag">a</span>&gt;</tt><br />
  <br />
  <tt>.......</tt><br />
  <br />
  <tt>&lt;span class="myclass"&gt;Hi There&lt;/span&gt;</tt><br />

Powered by WordPress