jquery - 从 WebForm 代码隐藏中使用 JQuery 更改 CSS

Question

我正在尝试从代码隐藏中更改 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

Answer 1

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

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

它看起来您刚刚在那里复制了代码，这是一个好的开始。您的下一步是验证这些 css 类是否在页面上的 标记中正确定义，或者它们是否在正确加载的 css 文件中。最后，验证 pbar-ani.gif 文件的路径相对于声明 css 类的位置是否正确。

编辑

根据您在下面的评论，这将是一个更可行的解决方案:

定义两个单独的 css 规则。

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

然后在任何需要的地方使用 jQuery 将“已加载”(您可以将其更改为任何内容)类添加到页面上的进度条。

$('.anibar').addClass('loaded');

另一种选择是删除“anibar”类，这将使控件的外观返回到原始状态。

$('.anibar').removeClass('anibar');