【问题标题】：How to change background image of the css block using jquery [duplicate]如何使用jquery更改css块的背景图像[重复]
【发布时间】：2013-05-12 15:00:18
【问题描述】：

<style type="text/css">
            .RadWindow .rwWindowContent .radalert
            {
                background-image:url("images/InfoImg.png"); 
            }
        </style>

上面的css文件中的代码，我想改变上面css文件的背景图片，当用户调用 Jquery 服装功能时，我想更改 rad alert 的背景图像。

【问题讨论】：

在相关说明中，三个类选择器？这可能会减慢页面渲染速度。

标签： jquery html

【解决方案1】：

试试这个简单的老式方法：

$(document).ready(function(){
    $('.RadWindow .rwWindowContent .radalert')
    .css('background-image', "url('images/InfoImg.png')");
})

或

根据评论请求，您可以使用 jQuery 的 .toggleClass() 方法。为了发挥最大优势，在 css 中简单地设置 2 个交替背景类。在加载时将一个分配给您的元素（将其写入 HTML）并准备好另一个。然后，在“动作”上，使用 toggleClass 交替两个类！

Working Example

它的工作原理很简单。首先设置你的 CSS：

<style type="text/css">
    .bg-type-01 {
        background-image: url("some url");
    }
    .bg-type-02 {
        background-image: url("another url");
    }
</style>

然后将您的第一个类应用于您的元素：

<div class="radalert bg-type-01"> ... </div>

最后，用jQuery写一个非常简单的JS！

<script type="text/javascript">
    $(function() {
        $("something").on("click", function(e) {
            $(".radalert").toggleClass("bg-type-01 bg-type-02");
        });
    })
</script>

【讨论】：

所有好的答案，但我必须指出，拥有 2 个类为编辑器提供了“切换”能力，而无需一堆额外的代码
选择器与OP的选择器不同：类之间应该有空格（祖先选择器）而不是逗号（其他选择器）...
我认为它们是差异类，抱歉，我已经编辑了这些，谢谢
@Gautam3164 好吧...
你也可以考虑toggleClass..？？

【解决方案2】：

使用两个类：

<style type="text/css">
    .RadWindow .rwWindowContent .radalert {
         background-image:url("images/InfoImg.png"); 
    }
    .RadWindow.newbg .rwWindowContent .radalert {
         background-image:url("images/other_image.png"); 
    }
</style>

JS：

$('.RadWindow').addClass('newbg');    // adds the new background
$('.RadWindow').removeClass('newbg'); // removes the new background
$('.RadWindow').toggleClass('newbg'); // toggles the new background

【讨论】：

很好的答案，你真的应该提到 jQuery 的.toggleClass() 能力

【解决方案3】：

假设您必须将图像的 url 更改为“images/InfoImg2.png” 您可以使用代码选项 1-

jQuery -

var newUrl = "images/InfoImg2.png";
$(".radalert").css({
    backgroundImage : 'url("'+newUrl+'")'
});

或

CSS -

RadWindow .rwWindowContent .radalert2{
  background-image:url("images/InfoImg2.png"); 
}

jQuery -

$(".radalert").addClass("radalert2");

【讨论】：

这些都是很好的答案，但最好的建议是我必须选择自己想的 2 类

【解决方案4】：

试试

$('.RadWindow .rwWindowContent .radalert').css('background-image', 'images/new.png')

【讨论】：

大声笑，你迟到了，但无论如何，这里有一点