如何从 JavaScript / C# 生成宽度 CSS答案

【问题标题】：How to generate width CSS from JavaScript / C#如何从 JavaScript / C# 生成宽度 CSS
【发布时间】：2013-03-19 22:10:32
【问题描述】：

在过去的几天里，我一直试图让我的 C# 变量值通过 JavaScript 与我的 HTML 代码进行通信，现在我有了这个 HTML 代码，我想在页面加载时通过 C# 中的值进行更改。在页面加载时，我想通过 JavaScript 从我的 c# 变量值中设置 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>

    protected double percentageLevelComplete { get; set; }

JavaScript

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

我正在做的事情是正确的吗？如果是这样，我做错了什么，因为目前这不起作用。

【问题讨论】：

据我所知，完成的百分比级别在页面生成时被硬编码到脚本标记中一次，因此除非您以某种方式使用 AJAX，否则它不会改变。跨度>
@Asad - 所以你的意思是，使用这种技术，每次页面加载时值只能更改一次？老实说，这对我的情况来说就足够了，因为每次页面加载都会在 c# 中生成该值。你是对的，这可能会产生误导，因为我在标题中说的是“动态”。
@Asad - 话虽如此，它还没有工作，甚至在页面加载时也没有，所以解决这个问题可能对我来说就足够了

标签： c# javascript asp.net html css

【解决方案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>

【讨论】：

@insert - 这正是我所需要的，并且以最简单的方式。我没想到我能做到这一点，我太傻了。非常感谢
@RyanSammut 好的，但我没有插入