이 Javascript 코드에 CSS를 적용하는 방법은 무엇입니까?

Question

사용자의 장치에 따라 이미지를 표시해야하는 앱을 만들고 있습니다. 그래서 메뉴와 자신의 아이콘을 표시하기 위해 다음과 같은 자바 스크립트 코드를 사용하고 있습니다 :

var $imgsrc; 

    if(dummy_url_decode(results.rows.item(i).title) == "Web Info") 

    $imgsrc = "icons/web_info.png"; 

    if(dummy_url_decode(results.rows.item(i).title) == "Misc.") 

    $imgsrc = "icons/misc.png"; 

지금 나는 장치가 다음 그것을 다른 아이콘을 표시한다 망막 디스플레이의 경우 조건을 적용 할. 미디어 쿼리 구문을 가지고 있지만 CSS에서 img 경로를 변경하는 방법을 모릅니다. 아무도 나를 도울 수 있습니까? 사용중인 미디어 쿼리는 다음과 같습니다.

@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width : 768px) and (max-device-width : 1024px) 

Answer 1

CSS에서 속성을 변경할 수 없습니다.

당신의 최선의 선택은 아마도 적절한 width 및 height와 display:inline-block에 <span> 또는 대신 이미지의 <div>, 스타일을 사용하는 것입니다, 그리고 당신은 당신의 미디어 쿼리에 background-image 속성을 변경할 수 있습니다. 이 같은

뭔가 :

HTML :

<span id="myIcon"></span> 

CSS : 나는 당신이 답장을 주셔서 감사합니다,하지만 당신은 샘플 코드로 explian 수

#myIcon { 
    display:inline-block; 
    width:32px; 
    height:32px; 
    background-image:url('icons/some_icon.png'); 
} 
@media screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width:768px) and (max-device-width:1024px) { 
    #myIcon { 
     width:64px; 
     height:64px; 
     background-image:url('icons/some_hi-res_icon.png'); 
    } 
}