如何获取/设置Div和表格宽度/高度

我有一个表格（或一个区域），并希望将其宽度和高度值设置为另一个Div（或区域）。如何获取/设置Div和表格宽度/高度

第二个实际上是一个Ajax Indicator模式，它在页面异步回传时显示加载文本。这里是例子

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

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

下面的JavaScript没有工作

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

它应该工作无论在IE和Firefox。如何纠正它。

我在StackOverFlow中检查了一些其他的解决方案，但我无法修复它。

我在等你的消息。

更新：我用这个

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

，我这样称呼它

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

但它让我无法找到对象的错误

更新2我看到这个错误

alt text

和调试我面对这个

alt text

来源

2010-06-02 Nasser Hadjloo

看起来你是短单引号的。这些参数是字符串还是DOM元素？ – jAndy 2010-06-02 05:49:50

'regionToChange'总是一个'DIV'元素，'mainregion'总是一个'Table'或者'fieldset'或者一个'Div'，正如你在我的问题中所看到的，我用两个参数调用SetSize方法。一个用于Div的更改，另一个用于指定对象以使用宽度和高度属性值。因此，此方法是常用的，可用于所有页面，因此它必须获取2个参数，而且不应该是静态的。 – 2010-06-02 05:56:41

了解，但这并不能回答我的问题。如果参数是DOM对象，则使用'$（regionToChange）'。如果他们是字符串文字使用'$（'＃'+ regionToChange）' – jAndy 2010-06-02 06:19:40

在jQuery的

你可以做

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

等与高度...

编辑

在JavaScript中，如果您的HTML是这样的ID = “MainTable”

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

，因为你正在访问的样式属性

这

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

将工作...

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

来源

2010-06-02 05:28:23 Reigel

@Reigel - JavaScript呢？ – 2010-06-02 05:33:28

请参阅编辑... – Reigel 2010-06-02 05:43:04

@Reigel - 我用你的，它不起作用。我也用你提到的查询更新我的问题，但它显示一个错误。它不起作用。请看看。 – 2010-06-02 05:47:07

说jQuery中：

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

来源

2010-06-02 05:29:01 jAndy

Javascript的 - 而notethat这是一个常用的方法，将在所有应用程序页面，因此ID应该是可变的。 – 2010-06-02 05:38:01

嗯，实际上它是JavaScript。如果你正在寻找跨浏览器的兼容性，使用像jQuery这样的框架是你能做的最好的事情。 – jAndy 2010-06-02 05:40:01

检查我的更新jAndy。我有这个脚本的错误 – 2010-06-02 05:48:15

如何获取/设置Div和表格宽度/高度

回答

相关问题