.style is undefined?

.style is undefined?

Hi all,

In the code below, I get an error "button.style is undefined".  When I change the way I get the button element to document.getElementById("button"), I don't get this error.  Does anyone know why this is, and if there is some way of making the $("button") method work? 

The reason I'm asking, is that I am introducing JQuery to a very large project, which uses $("button") method in thousands of places.  When I include the jquery scripts, I get this error, but if they are not included I don't get the error.

Thanks for any help, example code illustrating the problem is below:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/humanity/jquery-ui.css" type="text/css" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
    <head>
    <script type="text/javascript">
    <!--
    function onloadfn() {
        //disableButton(document.getElementById("button"));
        disableButton($("button"));
    }
   
    function onunloadfn() {}

        function disableButton(button)
        {
            if(button != null) {
                button.disabled = true;
                button.style.color = "#FF0000";
            }
            else {
                alert('Error: common.js: disableButton passed NULL');
            }
        }

    // -->
    </script>
    </head>
   
    <body onload="onloadfn()">   
    <table>
<tr><td>
<input id="button" type=button value ="test"></input>
</td>
</tr>
</table>
</body>
</html>