使用 JQuery 从 WebForm 代码隐藏更改 CSS答案

【问题标题】：Change CSS of with JQuery from WebForm code-behind使用 JQuery 从 WebForm 代码隐藏更改 CSS
【发布时间】：2012-05-01 00:58:10
【问题描述】：

我正在尝试从代码隐藏中更改 html 元素的 CSS，但它似乎没有受到影响。客户端它工作。

我可以从代码隐藏调用其他客户端函数，但 JQuery CSS 似乎只在客户端工作。

这是我要调用的代码：

Page.ClientScript.RegisterStartupScript(Page.GetType(),
    "script",
    "$('.anibar .ui-progressbar-value').css('background-image', 'url(images/pbar-ani.png)');",
    true);

不确定这是否会有所作为 - 我正在使用 JuiceUI 进度条 - 使用常规 div 似乎可以工作。

这是它的来源：

<div id="divDialog" style="display: none" class="basic-dialog" title="Uploading..." runat="server">
    <juice:ProgressBar ID="ProgressBar1" runat="server" Value="100" CssClass="anibar" />
    <p>
        <asp:Label ID="lblMessage" runat="server" Text="Please wait." />
    </p>
</div>

使用 CSS：

.anibar
{
    height: 1.6em;
}
.anibar .ui-progressbar-value
{
    background-image: url(Images/pbar-ani.gif);
}

TIA

【问题讨论】：

标签： jquery css webforms juice-ui

【解决方案1】：

首先，不需要您使用 RegisterStartupScript 添加的脚本，因此您可以将其删除。

这里有一个使用 JuiceUI 创建动画进度条的功能示例：http://juiceui.com/controls/progressbar。这是页面上的第二个示例（奇怪的是，标记为示例 1）

它看起来就像您刚刚复制了那里的代码，这是一个好的开始。下一步是验证这些 css 类是否在页面上的

中的

【讨论】：

感谢您的回复。实际上，我正在尝试对 RegisterStartupScript 执行的操作是在我的代码执行完毕后将 .anibar .ui-progress-value 样式更改为不同的背景图像。当页面首次加载时，它看起来不错，但我需要在某个点（服务器端）更改背景图像。
我已更新我的原始答案以反映您分享的说明。

【解决方案2】：

您是否在浏览器中看到任何 javascript 错误？

很难说，但我会检查一些事情......

1.) 启动脚本在页面上呈现时是否已加载 jquery（是否定义了“$”）？

2.) 将脚本放到页面上时，DOM/JuicUI 是否完成渲染？如果没有，您可以将脚本包装在一个 jquery 文档中吗？

3.) '.ui-progressbar-value' 是正确的选择器吗？它是一个有内容的元素还是需要更多的 CSS 才能使背景图像可见（例如高度、宽度）？

4.)你真的需要来自代码隐藏的 javascript 来应用这个 css 而不是样式表吗？

希望这可以为您指明解决方案。

【讨论】：