Comment appliquer CSS à ce code Javascript?

Question

Je travaille sur une application qui nécessite d'afficher des images en fonction de l'appareil de l'utilisateur. Donc, je suis en utilisant le code Javascript suivant pour afficher les menus et leurs icônes:

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

Maintenant, je veux appliquer la condition si l'appareil est à l'écran Retina, il devrait afficher des icônes différentes pour elle. J'ai la syntaxe de requête de médias, mais je ne sais pas comment modifier le chemin img à partir de CSS. Quelqu'un peut-il m'aider? La requête de média que j'utilise est:

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

Answer 1

Vous ne pouvez pas modifier les attributs de CSS.

Votre meilleure option serait probablement d'utiliser un <span> ou <div> au lieu d'une image, le style à display:inline-block avec approprié width et height, et ensuite vous pouvez modifier la propriété background-image dans vos requêtes médias.

Quelque chose comme ceci:

HTML:

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

CSS:

#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'); 
    } 
}