1

ここ数日、JavaScript を使用して C# 変数の値を HTML コードと通信させようとしていましたが、ページの読み込み時に C# の値を介して変更したいこの HTML コードがあります。ページの読み込み時に、C# 変数値から JavaScript を介して SPAN の CSS 幅の値を設定したいと考えています。

progressBarPercentage SPAN は、CSS 幅を設定したいものです。これは、jQuery プログレス バーが値を好む方法だからです。幅はパーセンテージで表されるため、これだけで機能します。

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

私が行っていることは正しい方法ですか？もしそうなら、これは現時点では機能していないので、何が間違っていますか。

4

1 に答える 1

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>
于 2013-03-19T22:24:36.743 に答える