如何從JavaScript / C＃生成CSS寬度

Question

最近幾天，我一直在嘗試讓C＃變量值通過JavaScript與HTML代碼進行通訊，現在我有了這個HTML代碼，我想在頁面加載時通過C＃中的值進行更改。 在頁面加載后，我想通過JavaScript從我的c＃變量值中設置SPAN的css寬度值。

progressBarPercentage SPAN是我想要設置CSS Width的那個，因為這就是我的jQuery Progress Bar想要值的方式。 寬度將以百分比表示，因此就可以了：

<span id="progressBarPercentage" style="width: 40%"></span>

但這是我正在嘗試做的事情：

HTML

    <div id="progressBarArea" class="progress-bar orange stripes">
        <asp:Label ID="progressBarText" runat="server" Visible="true" Text="49%" CssClass="progressBarText"></asp:Label>
        <span id="progressBarPercentage" onload="setProgressBarPercentage()"></span>
        <p class="align-center">Points Until Next Level: <asp:Label id="pointsUntilNextLevelLabel" runat="server" Text="0" CssClass="pointsUntilNextLevelLabel"></asp:Label></p>
    </div>

C＃

    protected double percentageLevelComplete { get; set; }

JavaScript的

<script type="text/javascript">
    function setProgressBarPercentage(){
        var element = document.getElementById("progressBarPercentage");
        element.style.width = <%=percentageLevelComplete%> + "%";
    }
</script>

我正在做正確的事情嗎？ 如果是這樣，我在做什么錯，因為目前無法正常工作。

Answer 1

您可以使用以下代碼（不帶javasript）：

<div id="progressBarArea" class="progress-bar orange stripes">
        <asp:Label ID="progressBarText" runat="server" Visible="true" Text="49%" CssClass="progressBarText"></asp:Label>
        <span id="progressBarPercentage" style="width:<%=percentageLevelComplete %>%"></span>
        <p class="align-center">Points Until Next Level: <asp:Label id="pointsUntilNextLevelLabel" runat="server" Text="0" CssClass="pointsUntilNextLevelLabel"></asp:Label></p>
    </div>