배경 이미지 레이블 변경 중 ... 아무 일도 일어나지 않습니다.

Question

저는 BigCommerce 플랫폼에서 페이지의 특정 레이블 배경 이미지를 변경하려고합니다. 이러한 특정 요소에 대해 HTML을 편집 할 수 없으므로 CSS만으로는이 작업을 수행 할 수 없습니다. 저는 여기에 이러한 목표를 달성하기 위해 노력하고있어 페이지로 연결되는 링크는 다음과 같습니다

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"); 
});