Modifying CSS Styles with JavaScript

I recently came a cross problem at a client where I needed the page content to change upon a button click before the page is posted back. For example, imagine you have a page used to upload files. You want the page to display something like "Your file is being uploaded" right when the user clicks the upload button. Then the page is posted back while the desired message is displayed. The solution I came up with utilized JavaScript to modify the Cascading Style Sheets, CSS, of the page and then post.
The solution was as simple as adding multiple wrapping div's around the content. This could actually be done with only two div's but for my page I need three. The div that had to be shown when the page is first requested had a default CSS Display property value of "block." The div that was to be shown after the user clicks a button had Display value of "hidden." In the code that executed following the button click as shown below, one div is being hidden, one is modified to be shown, and lastly the page is posted. The JavaScript code I had was similar to the following:


function btnClick()
{
document.getElementById("initialDiv").style["display"] = "hidden";
document.getElementById("secondDiv").style["display"] = "block";
document.form1.submit();
}