Detect multiple classnames without jquery
<p>Learning DOM0 javascript and the prof has thrown a curveball.  He writes dozens of paragraphs with class names: sports, life, books, comedy and then this:</p>

<pre><code>&lt;p class="sports books comedy"&gt;
    I found this book: http://www.amazon.com/Teed-Off-Laughs-Greens-Sports/dp/0233995005/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1277749796&amp;sr=1-1 You don't have to be good to play, but a low level of self-esteem is helpful! Humorous collection of colour photographs and hilarious text reduces our heroes of the golf course to mere mortals. No golfing disaster is left secret and the 80 photographs only go to prove the fallibility of international stars.
&lt;/p&gt;
</code></pre>

<p>Have to style it without using Jquery, my thought was this: </p>

<pre><code>window.onload=function(){
    var elements = document.getElementsByTagName('*');
    for (var i=0; i&lt;elements.length; i++) {
        if (elements[i].className == 'sports') {
            elements[i].style.border="2px solid green";
        }

        else if (elements[i].className == 'life') {
            elements[i].style.color="red";
        }

        else if (elements[i].className=="books") {
            elements[i].style.textAlign="right";
        }

        else if (elements[i].className=="comedy") {
            elements[i].style.fontSize="200%";
        }
    }
}
</code></pre>

<p>Which works for everything except the multiple classname.  Trying to find a way around it.</p>
