2

我是网络编程新手，需要一些帮助。我正在使用这个 CSS 代码来动态控制标签的外观。如何从后面的代码中动态更改属性“width”的值？我还需要刷新标签文本。请在下面找到我的代码

**strong text**
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
     <style type="text/css">
            .bar {
        position: relative;
        width: 250px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        background: #003458;
        background: linear-gradient(to bottom, #005478 0%,#003747 100%);
        color: white;

    }

    .bar:before {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        bottom: 0;
        width: 40%;**** this value needs to be changed from code behind.
        content: '';
        background: rgba(0, 255, 0, 0.1);
    }
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
<asp:Label ID="Label18" runat= "server"  CssClass="bar">20%</asp:Label>

</ContentTemplate>

        </asp:UpdatePanel>

解决方案将不胜感激。

先感谢您！

4

2 回答 2

3

您可以将其设置width为您控制的变量：

.bar:before {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        bottom: 0;
        width: <%= BarWidth %>;
        content: '';
        background: rgba(0, 255, 0, 0.1);
    }

然后在你的代码后面，设置它：

private string barWidth = "40%";

public string BarWidth
{
    get { return barWidth; }
    set { barWidth = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
    barWidth="70%";
}

更新：根据您的评论......这是一种不同的方法。我重命名.bar:before为.barStatus并width从 CSS 中删除了该行。您将不需要HiddenField我在示例中使用的...这只是一个示例，因此您可以观看它的工作，然后将其修复为您的代码所需的内容。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="_bar" class="bar"><span id="_barStatus" style="width:0%;" class="barStatus" runat="server"></span></div>
        <asp:Timer runat="server" id="Timer1" Interval="100" OnTick="UpdateBar"></asp:Timer>
        <asp:HiddenField ID="_barState" Value="10" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

和 OnTick 功能：

protected void UpdateBar(object sender, EventArgs e)
{
    int barStatus = Convert.ToInt32(_barState.Value);
    if (barStatus < 100)
    {  
        barStatus += 2;
        _barState.Value = barStatus.ToString();
        _barStatus.Attributes["style"] = String.Format("width:{0}%;", barStatus);
        _barStatus.InnerText = String.Format("{0}%", barStatus);
    }
}
于 2013-09-21T03:35:01.617 回答
0

对于标签宽度 Label18.Style.Add("width","200px"); 标签18.Width = 200; [这也行]

用于文本显示 Label18.Text ="你想显示什么";

于 2013-09-21T04:34:44.493 回答