How to Get / Set Div and Table Width / Height

Question

I have a Table (or a region) and want to set it's Width and Height value to another Div (or region).

The second one is actually a Ajax Indicator modal which display a loading text when the page is asynchronously post back. here is the example

<table id="MainTable">
    <tr>
        <td>
             Content ....
        </td>
    </tr>
</table>

<div id="Progress">
     Ajax Indocator
</div>

the following javascript didn't work

document.getElementById("Progress").style.width = document.getElementById("MainTable").style.width;
document.getElementById("Progress").style.height = document.getElementById("MainTable").style.height;

It should work both on IE and FireFox. how to correct it.

I checked some other solution in StackOverFlow but I couldn't fix it.

I'm waiting to hear from you.

---

Update : I use this

<script>
function SetSize(regionToChange, mainRegion) {
    $(document).ready(function() {
        $('#regionToChange)
 .width($('#mainRegion).outerWidth())
 .height($('#mainRegion).outerHeight());
    }); 
}
</script>

and I call it like

<asp:Button ID="btnReset" runat="server" SkinID="Button" Text="Reset" OnClick="btnReset_OnClick" OnClientClick="SetSize('Progress', 'MainTable');" />

But it shows me an error which can not find the object

---

Update 2 I see this error

and in debugger I face with this

Answer 1

in jQuery you can do

$("#Progress").css('width', function(){
   return $("#MainTable").width()+'px';
});

and so with the height...

edit

on javascript,

this

document.getElementById("Progress").style.width = document.getElementById("MainTable").style.width;
document.getElementById("Progress").style.height = document.getElementById("MainTable").style.height;

will work if your html is something like this for id="MainTable"

<table id="MainTable" style="width: 500px; height: 300px;">
    <tr>
        <td>
             Content ....
        </td>
    </tr>
</table>

because you are accessing style attribute...

edit2

 function SetSize(regionToChange, mainRegion) {
        $(regionToChange)
         .width($(mainRegion).outerWidth())
         .height($(mainRegion).outerHeight());

  }

//you can use it as

SetSize('#Progress','#MainTable'); // prefix '#'if it's an ID 

Answer 2

spoken in jQuery:

$(document).ready(function(){
   $('#Progress')
     .width($('#MainTable').outerWidth())
     .height($('#MainTable').outerHeight());
});