gpt4 book ai didi

javascript - 如何将 CSS 应用于此 Javascript 代码?

转载 作者:太空宇宙 更新时间:2023-11-04 15:04:45 25 4
gpt4 key购买 nike

我正在开发一款需要根据用户设备显示图像的应用。所以我使用以下 Javascript 代码来显示菜单及其图标:

  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)

最佳答案

您不能通过 CSS 更改属性。

您最好的选择可能是使用 <span><div>而不是图像,将其设置为 display:inline-block与合适的widthheight , 然后你可以改变 background-image媒体查询中的属性。

像这样:

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

关于javascript - 如何将 CSS 应用于此 Javascript 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16017698/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com