代码之家 › 专栏 › 技术社区 › Nasser Hadjloo

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

ajax html jquery javascript asp.net

Nasser Hadjloo · 技术社区 · 16 年前

我有一个表(或一个区域),希望将它的宽度和高度值设置为另一个DIV(或区域)。

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

<table id=“maintable”>
T>
TD & GT;
内容…
&T/GT;
& LT/TR & GT;
&表;

<div id=“progress”>
阿贾克斯感应器
&L/DIV & GT;
< /代码> 

以下javascript不起作用

document.getElementByID(“progress”).style.width=document.getElementByID(“maintable”).style.width;
document.getElementByID(“progress”).style.height=document.getElementByID(“maintable”).style.height;
< /代码> 

它应该可以在IE和火狐上使用。如何纠正。


我在StackOverflow中检查了一些其他解决方案,但无法修复。


我在等你的消息。




更新:我用这个

脚本
函数setSize(RegionToChange,MainRegion){
$(document).ready(函数()。{
美元('RegionChange)
.width($('mainRegion).outerwidth())
.height($('mainRegion.outerheight());
(});
}
& /脚本& GT;
< /代码> 

我称之为

<asp:button id=“btnreset”runat=“server”skinid=“button”text=“reset”onclick=“btnreset\u onclick”onclientclick=“setize('progress','maintable');”/gt;
< /代码> 

但它显示了一个找不到对象的错误



update 2I see this error




在调试器中,我面对的是



第二种模式实际上是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和火狐上都能工作。如何纠正。

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



在调试器中,我面对的是

2 回复 | 直到 16 年前

Reigel Gallarde 16 年前

在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>

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

编辑2

 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

jAndy 16 年前

jquery中的口语:

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