javascript - 调整按钮的宽度以匹配另一个自动调整大小的按钮

Question

我有一个 ASP.NET 页面，其中包含两个按钮 btnConfirm 和 btnAbort。 btnConfirm 的宽度未设置，因此它会自动调整大小以适应。
我希望 btnAbort 与 btnConfirm 具有相同的宽度。

问题:这两个按钮都位于最初不可见的面板中，通过在更新面板中单击按钮即可显示该面板。这意味着，最初页面上不存在这些按钮。

有一些解决方案，但据我所知，它们通常适用于始终可见的控件。我发现/尝试过的解决方案是

为两个按钮设置固定宽度
我不希望这样，因为我无法确定字体有多大。

在代码隐藏中设置宽度
我尝试在代码隐藏中设置 btnAbort 的宽度。我在 Page_Load 以及 Button_Click 处理程序中尝试了它，显示了面板

pnlConfirm.Visible = true;
btnAbort.Width = btnConfirm.Width;

但是，btnConfirm.Width 即使可见，仍然为空。

通过JavaScript设置宽度
我在页面开头添加了一个脚本

<script type="text/javascript">
    var Abortbtn = document.getElementById("<%= btnAbort.ClientID %>");
    var Confirmbtn = document.getElementById("<%= btnConfirm.ClientID %>");
    Abortbtn.style.width = Confirmbtn.style.width;
</script>

但是，从浏览器中的调试来看，Abortbtn 和 Confirmbtn 似乎始终为零(我认为是因为不可见)，并且脚本不会再次执行，当 UpdatePanel 更新以显示面板时。

绑定(bind)宽度属性
我更改了 btnAbort 标记，将 Width 属性绑定(bind)到另一个按钮

<asp:Button runat="server" Width="<%# btnConfirm.Width %>" ID="btnAbort" Text="Abort" OnClick="Abort_Clicked" />

我在 Page_Load 中调用了 Page.DataBind()。这似乎没有改变任何东西(可能是因为 btnConfirm 的 Width 属性从来没有设置过)。

现在我没有主意了。可以这样做来保持控件的尺寸动态，还是应该将它们设置为固定宽度并完成它？

Answer 1

您需要在 UpdatePanel 更新后运行 JavaScript 代码。您可以使用以下代码:

<script type="text/javascript">
    function BeginRequestHandler(sender, args) {
        //code that runs when an UpdatePanel starts refreshing
    }

    function EndRequestHandler(sender, args) {
        //code that runs when an UpdatePanel has finished refreshing.
        var Abortbtn = document.getElementById("<%= btnAbort.ClientID %>");
        var Confirmbtn = document.getElementById("<%= btnConfirm.ClientID %>");

        // If this is true, both buttons exist in DOM
        if(Abortbtn != null && Confirmbtn != null) {
            Abortbtn.style.width = Confirmbtn.offsetWidth+"px";
        }
    }

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
</script>

通过上面的代码，每次 UpdatePanel 开始更新时都会调用 BeginRequestHandler 函数，而每次 UpdatePanel 开始更新时都会调用 EndRequestHandler 函数。 UpdatePanel 已更新。

由于任何 UpdatePanel 更新都会触发这些处理程序，因此您可能需要进行一些检查以避免可能的错误。