Question

所以我在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错误，但图像不会改变。

对此的任何帮助将不胜感激。如果不是我的问题的解决方案，有没有更简单的方法来做到这一点，我还没有考虑？

Answer 1

我会从W3C所说的开始“ID和NAME令牌必须以字母开头（[A-Za-z]）”..看到Firefox是最兼容的浏览器，它可能无法正常工作......但是可以工作在其他人..那是我开始调试的地方。

Answer 2

我认为因为您在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");
});

更改背景图像标签......没有发生任何事情

2 个答案: