jquery - 如何更改类的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
});

如何才能做到这一点？

score 5 · Accepted Answer

在 click 函数中，您可以使用 jQuery 的选择器获得对您单击的元素的引用，您现在可以在其中搜索 span。一旦你有了它，你就可以改变 CSS 属性'background-image'：

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

score 4 · Accepted Answer

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

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

在css文件中你有：

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

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

4 回答 4