更新代碼後面的CSS屬性

我是網絡編程新手，需要一些幫助。我正在使用這個CSS代碼動態地控制標籤的外觀。我怎樣才能動態改變後面的代碼屬性「寬度」的值呢？我還需要刷新標籤文本。請在下面找到更新代碼後面的CSS屬性

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

解決我的代碼，將不勝感激。

預先感謝您！

來源

2013-09-21 user2801184

使用'：before'選擇器，您將在客戶端插入內容，服務器不知道它。我不認爲你可以從服務器上改變它。 – afzalulh

你可以設置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%"; 
}

UPDATE：下您的評論...在這裏是一種不同的方法。我將.bar:before更名爲.barStatus，並從CSS中刪除了width行。您不需要像我在示例中那樣需要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-21 03:35:01 MikeSmithDev

+1 @MikeSmithDev - 非常好！ – afzalulh

@MikeSmithDev：非常感謝您的回覆。我實際上想要繼續控制定時器的寬度，而不是在頁面加載時。每次它將檢查數據庫並相應地更新寬度。 – user2801184

@ user2801184啊，好的。我添加了一個應該給你一些關於如何處理的想法的例子。祝你好運。 – MikeSmithDev

對於標籤寬度 Label18.Style.Add（「寬度」，「200像素」）; Label18.Width = 200; [這也將工作]

對於文本顯示 Label18.Text =「無論你想顯示」;

來源

2013-09-21 04:34:44 Zainab

更新代碼後面的CSS屬性

回答

相關問題