Question

我想在语法上修改标签的图像，而不是只在设备上运行（Android，iOS）。它在Chrome /桌面上运行良好。

我尝试了 Div ， Span 和 Img 标签，但都有相同的行为。

请指导我如何更改背景图片。

我已经搜索过任何问题并尝试了选项，但对我来说没什么用。

HTML

<div class="healthCare_heading">
    <span class="healthCare_heading span" onclick="Utilities.switchResultsULMaps('PageUL', 'MapsDiv')"></span>
</div>

CSS

.healthCare_heading {
    float: left;
    width: 100%;
    box-shadow: inset 0 0 0 1000px rgba(13, 13, 13, 0.8);
}
.healthCare_heading span {
    float: right;
    margin-right: 0;
    background-image: url(../images/phone/1x/healthIcon.png) ;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    background-position: center;
    background-color: rgba(16,138,177,0.6);
}

使用 JS代码下方更改背景。

$(".healthCare_heading span").attr("style", "background-image:url(../images/phone/1x/healthCareBar_icon.png) no-repeat;margin-left: 0;background-size: 25px 25px;width: 30px;height: 30px;background-position: center;background-color: rgba(16,138,177,0.6);");

注意： - 我还尝试了 background-image：url（）和 background：url（），但两者都不能在设备上运行。

Answer 1

问题是您使用background-image属性，如background简写属性。简写为background，其中包含url和repeat属性，如

background: url('../images/phone/1x/healthCareBar_icon.png') no-repeat;

所以你的jquery将是

$(".healthCare_heading span").attr("style", "background: url('../images/phone/1x/healthCareBar_icon.png') no-repeat;margin-left: 0;background-size: 25px 25px;width: 30px;height: 30px;background-position: center;background-color: rgba(16,138,177,0.6);");

您可能需要考虑将这些样式应用于css类选择器和jQuery .addClass（）方法，而不是更改样式属性。

PhoneGap：JQueryMobile更新图像src未在设备上显示

1 个答案: