如何使用jquery更改css块的背景图像[重复]

Posted 2023-03-06

【中文标题】如何使用jquery更改css块的背景图像[重复]

【英文标题】：How to change background image of the css block using jquery [duplicate]

【发布时间】：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 的背景图像。

【问题讨论】：

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

【参考方案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')

【讨论】：

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