0

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

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

4

2 回答 2

0

我将从 W3C 所说的“ID 和 NAME 令牌必须以字母开头 ([A-Za-z])”开始......看到 Firefox 是最兼容的浏览器，它可能无法在其中运行......但可以在其他浏览器中运行。 . 那是我开始调试的地方。

于 2012-05-28T05:22:40.937 回答
0

我认为是因为您在 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");
});
于 2012-05-28T05:24:11.077 回答