更改背景图像标签..什么也没发生

Changing Background Image Label...nothing happening

本文关键字：什么 标签 背景 图像      更新时间：2023-09-26

所以我在BigCommerce平台工作，试图更改页面上某些标签的背景图像。我不能单独使用 CSS 来做到这一点，因为我无法编辑这些特定元素的 HTML。以下是我尝试完成此操作的页面的链接：

http://weddingsflowerpetal.mybigcommerce.com/a-vintage-affair-bouquet/

我正在尝试更改"白色"、"黑色"、"红色"等标签的背景。现在我有这个代码：

 document.getElementById("7eff70453e41b167e40002762d6195d7").style.backgroundImage="url('http://weddingsflowerpetal.mybigcommerce.com/templates/__custom/images/ribbons/blackribbon.png') no-repeat left";

我为每个标签元素准备了一个标签元素，将每个标签元素更改为正确的图像。现在，当我将代码放入页面时，它没有给我 JS 错误，但图像不会改变。

任何这方面的帮助将不胜感激。如果不是我的问题的解决方案，有没有我还没有考虑过的更简单的方法？

我会从W3C所说的"ID和NAME令牌必须以字母（[A-Za-z]）开头"开始。 看到Firefox是最合规的浏览器，它可能不起作用。但可以在其他人身上工作。这就是我将开始调试的地方。

我认为

是因为您在 JS 中设置 backgroundImage 属性，但您在 url 之后添加了其他 CSS 文本。应该是 document.getElementById("7eff70453e41b167e40002762d6195d7").style.background='...'或

document.getElementById("7eff70453e41b167e40002762d6195d7").style.backgroundImage='url...';然后 document.getElementById("7eff70453e41b167e40002762d6195d7").style.backgroundPosition='left';然后 document.getElementById("7eff70453e41b167e40002762d6195d7").style.backgroundRepeat='no-repeat';

但是，我注意到该网站正在使用jQuery。因此，您可以执行以下操作：

$(document).ready(function() {
    $("input[id='7eff70453e41b167e40002762d6195d7']")
        .css("background-image", "url('http://weddingsflowerpetal.mybigcommerce.com/templates/__custom/images/ribbons/blackribbon.png')")
        .css("background-repeat", "no-repeat")
        .css("background-position", "left top");
});

或者你可以尝试把它放在li父母身上

$(document).ready(function() {
    $("input[id='7eff70453e41b167e40002762d6195d7']").closest("li")
        .css("background-image", "url('http://weddingsflowerpetal.mybigcommerce.com/templates/__custom/images/ribbons/blackribbon.png')")
        .css("background-repeat", "no-repeat")
        .css("background-position", "left top");
});
相关文章：