aspx网页，在JS中设置两个控件的大小，为何总是只有第一个起作用？

xxwood 2025-01-07 16:43:56

VS2019，Web开发，最近有个需求，需要在前端JS中设置控件的大小。我先写了个测试页面试一下：

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="cx.rb.WebForm1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<script>
    window.onload = function () {
        var tb2 = document.getElementById('TextBox2');
        tb2.style.height = '200px';
        var tb1 = document.getElementById('TextBox1');
        tb1.style.height = '100px';
    }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body style="margin:0;">

    <form id="form1" runat="server">
        <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
&nbsp;&nbsp;&nbsp;
        <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">LinkButton</asp:LinkButton>
        <br />
        <br />
        <asp:TextBox ID="TextBox1" runat="server">111111111</asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" Visible="False">222222</asp:TextBox>
    </form>
</body>
</html>

后端代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace cx.rb
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            TextBox1.Visible = true;
            TextBox2.Visible = false;
        }
        protected void LinkButton2_Click(object sender, EventArgs e)
        {
            TextBox1.Visible = false;
            TextBox2.Visible = true;
        }
    }
}

很奇怪的就是<script>里面那一段function，本意是设置两个文本框的高度，但是只有写在前面的那个设置生效，谁写在前面谁生效，后面那个设置没起作用。这是为啥啊？？怎么才能让他们都生效啊？

...全文