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

【问题标题】：How to Get / Set Div and Table Width / Height如何获取/设置 Div 和表格宽度/高度
【发布时间】：2011-02-26 15:57:31
【问题描述】：

我有一个表格（或区域），想将其宽度和高度值设置为另一个 Div（或区域）。

第二个实际上是一个 Ajax 指示器模式，当页面异步回发时显示加载文本。这是一个例子

<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 我看到了这个错误

在调试器中我遇到了这个问题

【问题讨论】：

看来您缺少单引号。这些参数是字符串文字还是 DOM 元素？
regionToChange 始终是 DIV 元素，mainregion 始终是 Table 或 fieldset 或 Div，正如您在我的问题中看到的那样，我称之为SetSize 方法有 2 个参数。一个用于更改 Div，一个用于指定对象以使用宽度和高度属性值。因此，此方法是通用的，适用于所有页面，因此它必须获取 2 个参数，并且不应该是静态的。
了解，但这并不能回答我的问题。如果参数是 DOM 对象，请使用 $(regionToChange)。如果它们是字符串文字，请使用 $('#' + regionToChange)

标签： asp.net javascript jquery html ajax

【解决方案1】：

用 jQuery 说的：

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

【讨论】：

Javascript 怎么样 - 请注意，这是一种通用方法，将在应用程序的所有页面中使用，因此 ID 应该是可变的。
嗯，实际上它是 javascript。如果你正在寻找跨浏览器的兼容性，使用像 jQuery 这样的框架是你能做的最好的事情。

【解决方案2】：

在jQuery中你可以做到

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

还有身高……

编辑

在 JavaScript 上，

这个

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

如果您的 html 与 id="MainTable" 类似，则可以使用

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

因为您正在访问样式属性...

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

【讨论】：

@Reigel - Javascript 怎么样？
@Reigel - 我用过你的，但没用。我还用您提到的查询更新了我的问题，但它显示了一个错误。它不起作用。请看一下。
请注意，在使用之前必须包含ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js...
@Reigel - 我已将 Jquery 1.4.2 min 添加到我的项目中，并且遇到了我在 Update 2 中提到的错误。你可以在我的问题中看到它。提前谢谢你
您是否添加了 # 前缀而不是 OnClientClick="SetSize('Progress', 'MainTable');" 之类的前缀？