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）

看起来就像你刚刚复制了那里的代码一样，这是一个好的开始。下一步将验证是否在＆lt; style＆gt;页面上正确定义了这些css类。＆lt; head＆gt;中的标记或者他们在正确加载的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');

Answer 2

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

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

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

2.）当脚本放到页面上时，DOM / JuicUI是否完成渲染？如果没有，你可以将脚本包装在jquery文件中吗？

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

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

希望这可能会为您提供解决方案。

使用WebForm代码隐藏中的JQuery更改CSS

2 个答案: