如何从JavaScript / c#生成宽度CSS

本文关键字：CSS JavaScript | 更新日期: 2023-09-27 18:04:50

我一直试图让我的c#变量值与我的HTML代码通过JavaScript通信的最后几天，现在我有这个HTML代码，我想通过值从c#在页面加载改变。在页面加载时，我想通过JavaScript从我的c#变量值设置SPAN的css宽度值。

progressBarPercentage SPAN是我想设置的CSS宽度，因为这是我的jQuery进度条想要的值。宽度将是一个百分比，因此在它自己的工作:

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

但这就是我想做的:

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

我所做的是正确的方法吗?如果是这样，我做错了什么，因为这是不工作的时刻。

如何从JavaScript / c#生成宽度CSS

您可以使用以下代码(不使用javascript):

<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>
相关文章：