如何更改类的css属性

Question

我<span>内有<div>，如下所示：

<div id="#mydiv">
<a href="#">Hello</a><span class="myImageArea"></span>
    <div class="someClass">
    </div>
</div>                          

使用以下CSS：

.myImageArea {  
    background: url("../img/upArrow.png") no-repeat right 5px;
    display: inline-block;
    cursor: pointer;
}

我想更改类background:url

的属性myImageArea

$('#mydiv').click(function() {
    //change the background image of the class
});

如何做到这一点？

Answer 1

在click函数中，您可以使用jQuery的选择器获得对您单击的元素的引用，现在可以在其中搜索该范围。完成后，您可以更改CSS属性'background-image'：

$('#myDiv').click(function() {
    $('.myImageArea', this).css('background-image', 'newimagepath.png');
});

Answer 2

更好的是，不是直接设置属性，而是可以添加自定义CSS类（例如myFancyBackground）。 要添加课程，请使用以下内容：

$('#myDiv').click(function() {
    $('.myImageArea', this).addClass('myFancyBackground');
});

在css文件中你有：

.myFancyBackground {
  background-image:url('...');
}

所以将来，如果你想改变背景属性，比如图像，重复......你只需要改变CSS。

Answer 3

$('#mydiv').click(function() {
   $(this).find('.myImageArea').css('background-image', 'url("/path/to/new/image.jpg")');
});

Answer 4

您可以使用jQuery中的css()方法动态执行此操作。

$('#mydiv').click(function(){
    $('.myImageArea', this).css({'background-image':'url(path/to/new/image.png)'});
});