How to apply CSS to this Javascript code?

Question

I'm working on an app which requires showing images according to the user's device. So I'm using the following Javascript code to show the menus and their icons:

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

Now I want to apply condition if the device is with retina display then it should show different icons for it. I have the media query syntax but dont know how to change the img path from CSS. Can anybody help me? The media query I'm using is:

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

Niet the Dark Absol · Accepted Answer · 2013-04-15 15:42:06Z

1

You can't change attributes from CSS.

Your best option would probably be to use a <span> or <div> instead of an image, style it to display:inline-block with suitable width and height, and then you can change the background-image property in your media queries.

Something like this:

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

edited Apr 15, 2013 at 15:42

answered Apr 15, 2013 at 14:36

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PassionMachine Over a year ago

I appreciate you reply, but can you explian it with sample code? I'm new to CSS and javascript so it will be helpful to me!

Collectives™ on Stack Overflow

How to apply CSS to this Javascript code?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related