Javascript Tutorial -- Dynamically Changing CSS Properties with Javascript

As we've seen, there are a lot of very useful methods in the getElementById() method, but we haven't even scratched the surface yet. In this lesson, we introduce the "style" attribute, and some of its sub-attributes such as "color", "fontSize", "fontWeight" and "fontStyle". Like the "innerHTML()" method, the "style" attribute applies to text found between a tag open and a tag close, like <p> and </p>.

If you have any experience using Cascading Style Sheets (CSS), you will recognize the similarity between various CSS attributes and the Javascript attribute names. This similarity is not by accident -- the Javascript style attributes perform the same function as their (almost) namesakes in CSS. In fact, although I am certain there must be exceptions, if you aren't sure of the attribute to use in a Javascript, well, script, then you have a very good chance of finding the correct attribute if you take the CSS property you want to change, drop the hyphen between words (if applicable), and use uppercase for the first letter of the second and subsequent words.

Here is a partial list of Javascript style attributes, and the corresponding CSS attributes they modify:

Javascript	CSS	Purpose
color	color	Sets the font color.
backgroundColor	background-color	Sets the color of the element background.
fontFamily	font-family	Sets the font type, for example, Courier, Times, Arial, Verdana, sans-serif.
fontSize	font-size	Sets the size of the font.
fontStyle	font-style	Sets the style (normal, italic, oblique) of the font.
fontWeight	font-weight	Sets the weight (normal, bold, etc.) of the font.

As I mentioned above, this is only a partial list, and represents some of the more common tags that you might frequently use...and here is how you might use these attributes in a real script:

        <script type="text/javascript">
          <!--
            function GetColor()
              {
                var tag = document.getElementById('color')

                return(tag.value)
              }

            function GetSize()
              {
                var tag = document.getElementById('size')

                return(tag.value)
              }

            function ChangeStyle()
              {
                var tag = document.getElementById('important')

                tag.style.color = GetColor()
                tag.style.fontSize = GetSize()
              }
          //-->
        </script>
        ...
        <p id="important" style="font-size: medium; color: black;">
          This is an ordinary block of text in an HTML document.
        </p>

        <form id="demo">
          <select id="color" onChange="ChangeStyle()">
            <option value="black">black
            <option value="blue">blue
            <option value="red">red
            <option value="green">green
            <option value="white">white
          </select>
          <select id="style" onChange="ChangeStyle()">
            <option value="normal">normal
            <option value="italic">italic
            <option value="oblique">oblique
          </select>
        </form>
      

Here is a slightly more thorough on-line version of the above script.